我目前正在一个新元素中使用 Twitter Bootstrap。该元素的主要部分是一个缩略图库，与他们在示例中的那个完全一样(此处:http://twitter.github.com/bootstrap/components.html#thumbnails)。
问题是我目前正在根据图像的 EXIF 方向数据在需要时对图像进行 css 转换(基本上是旋转)。当我对 img 应用转换(目前使用 -webkit-transform，因为我正在 Chrome 上进行测试)时，它的父元素保持不变，并且图像“溢出”它的容器。
使用 Chrome，可以测试此行为，转到我之前链接的示例缩略图库，检查其中一个占位符图像并添加 style="-webkit-transform: rotate(90deg) 属性到 img 标签。图像溢出 li 容器元素并破坏布局。
有没有办法解决这个问题，让 Bootstrap 像对待原来那样处理 css 旋转图像一样？我想到手动设置 img 标签的高度和宽度，他们的 parent 会调整，但我无法知道在实际渲染之前图像将在服务器端渲染成多大尺寸, 所以这似乎排除了这种方法。
哦，顺便说一下，我知道我可以在服务器端求助于轮换，我知道这并不难，我只是非常愿意在浏览器中这样做，如果可能的话。
有什么想法吗？
谢谢!
编辑:Jaap 建议我旋转整个容器，如果不是因为我在缩略图 li 中有文本节点，这将完美地工作。旋转容器将使文本显示也旋转。
最佳答案
作为引用，基于 EXIF 数据解决图像旋转的(新)CSS 方法是 image-orientation: from-image 属性。
来自 http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/
These problems are all solved by the new CSS image-orientation property, which is now supported by Firefox 26. When the style image-orientation: from-image is applied to a JPEG image, the browser will take its EXIF orientation tag into account when performing layout and rendering. This means smartphone and digital camera images can now be displayed in their proper orientation natively by the browser, just by adding a single CSS property!
Here’s the first image in this article again, but this time with image-orientation applied. If you’re using Firefox 26, you’ll see this image rendered as it was intended, with the sky on top and the ground on the bottom.
关于css - 调整 css 转换图像的父元素以适应。 (推特 Bootstrap )，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10810496/