如何固定旋转img/div的宽度/高度

Question

这个例子显示了两个div，一个没有旋转，另一个有。旋转后的图像会阻挡文本。我该如何重写，这样文本就不会被掩盖？

.Rotate {
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}

<div>
<img src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>
<div>
<img class="Rotate" src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>

Answer 1

转换纯粹是可视化的。。。任何包装器都保持相同的大小，浏览器会记住图像的位置并为其分配空间。

在翻译后，将图像包装在大小合适的div中，就可以了。

.wrap {
  width: 300px;
  height: 460px;
  display: inline-block;
  background: red;
}
img {
  transform: translate(0, -100%) rotate(90deg);
  transform-origin: bottom left;
}

<div class="block">
  <div class="wrap">
    <img src="http://www.fillmurray.com/460/300" alt="" />
  </div>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

Answer 2

您可以使用边距来对齐。

.Rotate {
  transform: rotate(90deg);
  margin:100px -90px;
}

<div>
<img src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>
<div>
<img class="Rotate" src="https://farm4.static.flickr.com/3010/4566263938_a56f24a24f.jpg"> <br/>
Can you see me?
</div>