调整css变换图像的父元素以适应.(Twitter Bootstrap)

Question

我目前正在一个新项目中使用Twitter Bootstrap.该项目的主要部分是缩略图库,与他们的示例中的缩略图库完全相同(此处:http://twitter.github.com/bootstrap/components.html#thumbnails).

问题是我目前正在根据他们的EXIF方向数据进行css转换(基本上是旋转)图像.当我应用转换(现在使用-webkit-transform,因为我在Chrome上测试)到a时img,它的父元素保持不变,并且图像"溢出"其容器.

使用Chrome,可以测试此行为,然后转到我之前链接的示例缩略图库,检查其中一个占位符图像并向标记添加style="-webkit-transform: rotate(90deg)属性img.图像溢出li容器元素并中断布局.

有没有办法解决这个问题,让bootstrap处理一个css旋转的图像,好像它原来是这样的？我想过手动设置img标签的高度和宽度,他们的父母会调整,但我不知道在实际渲染之前图像在服务器端呈现的大小,所以这似乎排除了这个做法.

哦,顺便说一下,我知道我可以在服务器端转动,我知道这并不难,我只是非常喜欢在浏览器中这样做,如果可能的话.

有任何想法吗？

谢谢!

编辑:Jaap建议我旋转整个容器,如果不是因为我在缩略图lis中有文本节点,这将完美地工作.旋转容器将使文本显示旋转.

Answer 1

好的，在这种情况下你应该像这样应用它：

\n\n

<ul>\n<li class="span3 cw rotated">\n    <div class="thumbnail">\n        <img src="http://placehold.it/200x180" alt="">\n        <div class="caption">\n            <h5>Thumbnail label</h5>\n            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>\n            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>\n        </div>\n    </div>\n</li>\n

\n\n

\n\n

.cw img{\n  -webkit-transform: rotate(90deg);\n  height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */\n}\n.ccw img{\n  -webkit-transform: rotate(-90deg);\n  height: 210px; /* Width of container - padding (Height is now width since the image is rotated.) */\n}\n

\n\n

\xe2\x80\x8b\n查看小提琴：http://jsfiddle.net/dGgrG/4/

\n\n

唯一烦人的一点是 Bootstrap 中的最大宽度内容会扰乱您的纵横比。\n当您使用 Bootstrap 网格时，就会发生这种情况。你可以通过 css 否决它，或者 javascript 可以帮助你。

\n\n

要使用 JS 修复此问题，您应该查看以下 2 篇文章：

\n\n

用JavaScript获取图像的真实宽度和高度？（在 Safari/Chrome 中）

\n\n

jQuery 调整大小至纵横比

\n