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来隐藏由元素创建的溢出，因为transform只是一种视觉效果，并且不会修改页面的布局，并且在变换之前，由于倒置了视口，您肯定会溢出单位：

.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度并全屏显示图像

1 个答案: