Question

您好我想将图像旋转90度并将图像对齐div格式。即外部div应根据图像的高度自动扩展。我附上了JSFIDDLE。

<div style="float:left;border:1px solid #000;">
    <span style="float:left;transform:rotate(90deg); transform:50% 50% 0;">
        <img src="http://dimox.net/wp-images/css-border-radius.jpg"/>
    </span>
</div>

Answer 1

您可以使用CSS3旋转元素90deg（在现代浏览器上） - 如果您想移动div也可以将旋转应用于div本身：

div img {
    -moz-transform: rotate(90deg) translateX(150px);
    -webkit-transform: rotate(90deg) translateX(150px);
    -o-transform: rotate(90deg) translateX(150px);
    -ms-transform: rotate(90deg) translateX(150px);
    transform: rotate(90deg) translateX(150px);
}

http://jsfiddle.net/L7pNa/3/

或者如果你只是想要它有一个边框 - 你可以使用一个框阴影代替并删除div标记。

Answer 2

请尝试此代码。

<div style="float:left;border:1px solid #000;overflow: auto;">
    <span style="float:left; -ms-transform: rotate(90deg); /* IE 9 */     -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */     transform: rotate(90deg);">
        <img src="http://dimox.net/wp-images/css-border-radius.jpg">
    </span>
</div>

如何通过将图像旋转90度来对齐div内的图像

2 个答案: