调整css转换图像的父元素以适合。（Twitter Bootstrap）

我目前在一个新项目上使用Twitter Bootstrap。该项目的主要部分是一个缩略图库，与他们在示例中所使用的完全相同（此处为：http://twitter.github.com/bootstrap/components.html#thumbnails）。调整css转换图像的父元素以适合。（Twitter Bootstrap）

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

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

有没有办法解决这个问题，并有bootstrap对待一个CSS旋转的图像，就好像它原来是这样？我想到了手动设置标签的高度和宽度，他们的父母会调整，但我不知道在服务器端渲染图像的大小，然后才能真正呈现，这似乎排除这种方法。

哦，顺便说一句，“我知道我可以在服务器端进行轮换，我知道这并不难，我只是非常希望在浏览器中尽可能地做到这一点。

任何想法？

谢谢！

编辑：Jaap建议我旋转整个容器，如果不是因为我在缩略图li s内有文本节点，这将完美地工作。旋转容器也会使文本显示旋转。

来源

2012-05-30 malvim

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

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

唯一讨厌的一点是，MAX- Bootstrap中的宽度东西会增加纵横比。这将发生在您使用Bootstrap网格时。你可以在整个CSS中否决它，或者JavaScript可能会帮助你。

要与JS解决它，你应该看看这2个职位：

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

jQuery resize to aspect ratio

来源

2012-05-31 08:59:51 Jaap

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

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

你将面临然而接下来的问题是，旋转从原来的位置上。

来源

2012-05-30 08:05:21 Jaap

嗨！谢谢您的回答。我忘了说我已经尝试过了，但是我在缩略图里有其他节点（标题文本）。如果我旋转父项，文本也会旋转。我会更新并说。 – malvim

仅供参考，根据EXIF数据解决图像旋转的（新）CSS方式是image-orientation: from-image属性。

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

这些问题都是由新的CSS图像取向属性，当风格图像的取向，这是现在的Firefox 26支持解决：从图像应用于JPEG图像时，浏览器将在执行布局和渲染时考虑其EXIF方向标记。这意味着智能手机和数码相机图像现在可以通过浏览器本地显示正确的方向，只需添加一个CSS属性即可！

这是本文中的第一张图片，但这次是应用了图片方向。如果您使用的是Firefox 26，则会看到按原计划呈现的这张图片，顶部是天空，底部是地面。

来源

2013-09-14 16:24:46 mikel

谢谢，这真是太棒了！ – malvim

小心：在目前这似乎只有Firefox支持。 – Micronax

调整css转换图像的父元素以适合。 （Twitter Bootstrap）

回答

相关问题

调整css转换图像的父元素以适合。（Twitter Bootstrap）