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

我目前正在一个新项目上使用Twitter引导。该项目的主要部分是一个缩略图库，与他们在示例（此处：）中的缩略图库完全相同

问题是，我目前正在css转换（旋转，基本上）图像时，需要根据他们的EXIF方向数据。当我对

img

应用转换（目前使用-webkit transform，因为我正在Chrome上测试）时，它的父元素保持不变，并且图像“溢出”了它的容器

使用Chrome，可以在我之前链接的示例缩略图库中测试此行为，检查其中一个占位符图像并向

img

标记添加

style=“-webkit transform:rotate（90deg）

属性。图像溢出

li

容器元素并破坏布局

有没有办法解决这个问题，让bootstrap将css旋转的图像当作原来那样处理？我想手动设置

img

标记的高度和宽度，他们的父母会调整，但我不知道在实际渲染图像之前，服务器端会渲染多大的图像，所以这似乎很正常我们必须采取这种方法

哦，顺便说一下，我知道我可以在服务器端进行轮换，我知道这并不难，如果可能的话，我更愿意在浏览器中进行轮换

有什么想法吗

谢谢

---

编辑：Jaap建议我旋转整个容器，如果不是因为缩略图

li

s中有文本节点，这将非常有效。旋转容器也会使文本显示旋转。

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

---

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

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

<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>

​ 看看小提琴：

唯一让人恼火的是，引导中的“最大宽度”（max width）内容会弄乱你的纵横比。 这将在您使用引导网格时发生。您可以在整个css中否决它，或者javascript可以帮助您

要用JS修复它，您应该看看以下两篇文章：

作为参考，基于EXIF数据解决图像旋转的（新）CSS方法是

图像方向：从图像
属性

从

这些问题都通过新的CSS图像定向解决了
属性，该属性现在由Firefox 26支持
图像方向：从图像应用到JPEG图像时，浏览器
将在执行布局时考虑其EXIF方向标记
这意味着智能手机和数码相机图像现在可以
通过浏览器以正确的方向显示，只需
通过添加单个CSS属性

这是本文中的第一张图片，但这次是
应用了图像定向。如果您使用的是Firefox 26，您将看到
图像按预期进行渲染，天空位于顶部，地面位于顶部
在底部


您好！谢谢您的回答。我忘了说我已经试过了，但缩略图
li
（标题文本）中还有其他节点。如果我旋转父节点，文本也会旋转。我会更新并说。谢谢，这太好了！小心：目前这似乎只有firefox支持。
.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.) */
}