CSS 将肖像图像旋转 90 度并全屏显示图像

Question

我尝试了很多变体。使用 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>

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>

CSS 将肖像图像旋转 90 度并全屏显示图像

CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen

html

css

rotation

fullscreen

css-transforms