7

我目前正在一个新项目中使用 Twitter Bootstrap。该项目的主要部分是一个缩略图库，就像他们在示例中所拥有的一样（这里：http: //twitter.github.com/bootstrap/components.html#thumbnails）。

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

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

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

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

有任何想法吗？

谢谢！

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

4

3 回答 3

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，您将看到此图像按预期呈现，天空在顶部，地面在底部。

于 2013-09-14T16:24:46.920 回答
0

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

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

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

于 2012-05-30T08:05:21.553 回答
0

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

<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 个帖子：

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

jQuery调整宽高比

于 2012-05-31T08:59:51.403 回答