在没有 javascript 的情况下以不同的方向显示图像，但只有 html 和 css答案

【问题标题】：Display an image in its different orientation without javascript, but only html and css在没有 javascript 的情况下以不同的方向显示图像，但只有 html 和 css
【发布时间】：2015-06-20 19:12:46
【问题描述】：

我有一张支票图像要显示，它是横向（水平），但需要以纵向（垂直）显示。但是网站有要求不支持JavaScript。

例如，下面的一个，如果我应用旋转变换，图像将顺时针旋转 90 度并按照我的意愿以纵向显示，但它也不再适合其父 DIV。 我该如何解决这个问题？

<div style='border:1px solid red;'>
  DIV 1
</div>
<div style='border:1px solid red;'>
  An
  <img src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
  DIV 2
</div>

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

<div style='border:1px solid red; margin-top:100px'>
  DIV 1
</div>
<div style='border:1px solid red;'>
  An
  <img class='rotate90' src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
  DIV 2
</div>

【问题讨论】：

对不起，我不太明白。你的意思是like this?
@TheUknown 类似这种效果，但假设您事先不知道图像的大小，因此您不能只给它 80px 的上边距。我已经更新了我的 sn-p。希望这可以解释。
我发现 CSS 属性 image-orientation 完美地解决了这个问题，即 .rotate90 { image-orientation: 90deg }。但是只有 Mozilla 的 firefox 支持它:(
那似乎不是一个可行的选择。我估计只留下几行 JavaScript。
进一步参考：CSS Image Orientation Lands in Firefox 26

标签： html css image

【解决方案1】：

这是它的适合方式（代码取自答案的初稿）：

.VerticalAlign {
height: 300px;
}

.rotate90 {
position: relative;
top: 50%;
-webkit-transform-origin: top center;
transform-origin: top center;
-webkit-transform: rotate(90deg) translateY(-50%);
transform: rotate(90deg) translateY(-50%);
}

http://jsfiddle.net/dxweu9v5/

如果打算让父级适应旋转后的大小，那么没有 JavaScript 是不可能的：

Rotated elements in CSS that affects their parent's height correctly

【讨论】：

好的，我将使用“that is not possible without JavaScript”作为答案，因为它是从here 指向的。
为跟进干杯，但希望有更好的解决方案。从文档流中取出转换对动画性能很有好处，但在这种情况下不太方便。

【解决方案2】：

您只需将overflow: auto 添加到包含div。

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

<div style='border:1px solid red; margin-top:100px'>
  DIV 1
</div>
<div style='border:1px solid red;overflow: auto'>
  An
  <img class='rotate90' src="http://www.outreachaz.com/images/EMD%20Check.jpg" />image!
</div>
<div style='width:100%; border:1px solid red;'>
  DIV 2
</div>

【讨论】：

ic，但如果可能的话，我希望看到没有滚动条的整个支票图像:)