CSS旋转肖像图像90度并使图像全屏

Sli*_*d3r 3 html css fullscreen rotation css-transforms

我尝试了很多变化.使用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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="rotate bg"> </div>
Run Code Online (Sandbox Code Playgroud)

Tem*_*fif 10

您需要调整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;
}
Run Code Online (Sandbox Code Playgroud)
<div class="rotate bg"> </div>
Run Code Online (Sandbox Code Playgroud)