调整 css 转换图像的父元素以适应。 （推特引导）

Question

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

问题是我目前正在根据图像的 EXIF 方向数据在需要时对图像进行 css 转换（基本上是旋转）。当我对img 应用转换（现在使用 -webkit-transform，因为我正在 Chrome 上测试）时，它的父元素保持不变，并且图像“溢出”它的容器。

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

有没有办法解决这个问题并让引导程序将 css 旋转的图像视为原来的那样？我想手动设置img标签的高度和宽度，他们的父母会调整，但我不知道在实际渲染之前，图像将在服务器端渲染什么尺寸，所以这似乎排除这种方法。

哦，顺便说一句，我知道我可以求助于在服务器端旋转，我知道这并不难，我只是非常喜欢在浏览器中进行，如果可能的话。

有什么想法吗？

谢谢！

编辑：Jaap 建议我旋转整个容器，如果不是因为我在缩略图 lis 中有文本节点，这将非常有效。旋转容器将使文本显示也旋转。

Answer 1

作为参考，基于 EXIF 数据解决图像旋转的（新）CSS 方法是image-orientation: from-image 属性。

来自http://sethfowler.org/blog/2013/09/13/new-in-firefox-26-css-image-orientation/

这些问题都被新的 CSS image-orientation 解决了 属性，现在 Firefox 26 支持。当样式 image-orientation：from-image 应用于 JPEG 图片，浏览器 执行布局时将考虑其 EXIF 方向标签 和渲染。这意味着智能手机和数码相机的图像现在可以 由浏览器以正确的方向显示，只是 通过添加单个 CSS 属性！

这是本文中的第一张图片，但这次是 应用了图像方向。如果你使用的是 Firefox 26，你会看到这个 图像按预期渲染，天空在顶部，地面 在底部。

Answer 2

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

<ul>
<li class="span3 cw rotated">
    <div class="thumbnail">
        <img src="http://placehold.it/200x180" alt="">
        <div class="caption">
            <h5>Thumbnail label</h5>
            <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>
            <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
        </div>
    </div>
</li>

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

​ 查看小提琴：http://jsfiddle.net/dGgrG/4/

唯一烦人的一点是，Bootstrap 中的 max-width 东西会弄乱你的纵横比。 这将在您使用 Bootstrap 网格时发生。您可以在整个 css 中否决它，或者 javascript 可以帮助您。

要使用 JS 修复它，您应该查看以下 2 个帖子：

Get the real width and height of an image with JavaScript? (in Safari/Chrome)

jQuery resize to aspect ratio

Answer 3

您应该将旋转应用于容器，而不是 img。

http://jsfiddle.net/jaap/dGgrG/1/

然而，您将面临的下一个问题是旋转是从原始位置应用的。