CSS将肖像图像旋转90度并使图像全屏显示 [英] CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

问题描述

我尝试了许多变化。使用html img，使用背景图片作为元素。我的想法是，我旋转一个纵向图像90，以显示在侧面安装的显示器上（侧面放置一个16：9监视器）。我希望图像全屏显示。这是我最近的尝试。我正在使用视口缩放，但是我尝试了百分比和覆盖以及许多组合。我知道这是不对的，到目前为止，没有任何事情是对的。我切换vh和vw设置的原因是，根据运行理论，即使将其旋转为横向，它仍会在它认为是纵向的图像上应用缩放和变换。这令人困惑并且有点沮丧。谢谢。

I have tried many variations. Using an html img, using background image for an element. The idea is that I rotate a portrait oriented image 90 to display on a sideways mounted display, (picture a 16:9 monitor laid on its side). I would like the image to be full screen. Here is my latest attempt. I am using viewport scaling, but I have tried percentages and 'cover' and many combinations. I know this is not right, nothing has right been so far. The reason I have the vh and vw settings switched is because the running theory is that it still applies scaling and transformations on an image it thinks is portrait, even though it's been rotated to landscape. It is confusing and a bit frustrating. Thanks.

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.bg {
  background-image: url("http://www.liftedsites.net/images/IMG_7863.jpg");
  height: 100vw;
  width: 100vh;
}

<div class="rotate bg"> </div>

推荐答案

您需要调整 transform-origin 并添加一些翻译以纠正该位置。您还必须添加 overflow：hidden 来隐藏由元素创建的溢出，因为transform只是一种视觉效果，不会修改页面的布局以及在您变形之前自从反转视口单位后，肯定会发生溢出：

You need to adjust the transform-origin and add some translation to rectify the position. You have to also add overflow:hidden to hide the overflow created by the element because transform is only a visual effect and will not modify the layout of the page and before the tranform you will for sure have an overflow since you inverted the viewport units:

.rotate {
  transform: rotate(90deg) translateY(-100%);
  transform-origin:top left;
}

.bg {
  background: url(https://picsum.photos/2000/1000?image=1069) center/cover;
  height: 100vw;
  width: 100vh;
}

body {
  margin:0;
  overflow:hidden;
}

<div class="rotate bg"> </div>

这篇关于CSS将肖像图像旋转90度并使图像全屏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！