Question

当我使用旋转（90）旋转图像时，即使容器有溢出，也会切断图像的顶部：自动。

#container {
  width: 100%;
  overflow: auto;
}

.rotate90 {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

<div id="container">
  <img src="https://dummyimage.com/2048x1024/000/fff" id="image" class="rotate90" alt="">
</div>

示例：https://jsfiddle.net/dh0o6vz3/3/

有没有办法改变容器的css，使其溢出图像以及下方？

Answer 1

您需要使用overflow:visible代替，您也可以根据想要显示图像的方式更改变换原点

＆＃13;

#container {
  width: 100%;
  overflow: visible;
  border: 1px solid;
}

.rotate90 {
  transform: rotate(90deg);
  transform-origin: bottom;
}

＆＃13;

<div id="container">
  <img src="https://dummyimage.com/248x124/000/fff" id="image" class="rotate90" alt="">
</div>

＆＃13;

Answer 2

所以我最终不得不强制进行翻译，我觉得这很有意义。

.rotate90 {
  -webkit-transform: rotate(90deg) translate(25%);
  -moz-transform: rotate(90deg) translate(25%);
  -o-transform: rotate(90deg) translate(25%);
  -ms-transform: rotate(90deg) translate(25%);
  transform: rotate(90deg) translate(25%);
}

这并不适用于所有情况，因为图像的宽度决定了我需要的％翻译。

但它适用于我的用例，

图像旋转 - 图像截止

2 个答案: