CSS旋转纵向图像90度并使图像全屏显示

Question

CSS旋转纵向图像90度并使图像全屏显示

8

我尝试过很多变化。使用html img，将背景图像用于元素。我的想法是将纵向定向的图像旋转90度以在侧面安装的显示器上显示（想象一下一个16:9的监视器被放置在其侧面）。我希望图像全屏显示。这是我最新的尝试。我正在使用视口缩放，但我已经尝试了百分比和“cover”以及许多组合。我知道这不对，到目前为止什么都不对。我之所以切换vh和vw设置是因为跑步理论认为它仍然会对它认为是肖像的图像应用缩放和变换，即使它已经被旋转成横向。这令人困惑并有点沮丧。谢谢。

.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>

- Slid3r

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

您需要调整transform-origin并添加一些翻译来修正位置。您还必须添加overflow:hidden以隐藏元素创建的溢出，因为变换只是一种视觉效果，不会修改页面布局，在进行变换之前您肯定会有溢出，因为您倒置了视口单位。

.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>