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

Question

我尝试了很多变化。使用 html img，使用元素的背景图像。这个想法是我将一个纵向图像旋转 90 以显示在一个侧面安装的显示器上（想象一个 16:9 的显示器放在它的侧面）。我希望图像是全屏的。这是我最近的尝试。我正在使用视口缩放，但我尝试了百分比和“覆盖”以及许多组合。我知道这是不对的，到目前为止没有任何事情是对的。我切换 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>

Answer 1

您需要调整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>