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

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 将元素旋转 90 度(在现代浏览器上)- 如果您也想移动 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 标记。