在 Chrome 27 及更高版本中使用纯 CSS 按高度动态缩放图像

Question

感谢James Montagne's 的解决方案，我构建了一个单行图库，仅使用 CSS 即可在 specific behaviour 中缩放图像。

效果很好 - 除了 Chrome 27 及更高版本。这里图像的宽度保持在初始值，而高度正确缩放。

请查看this Fiddle或以下代码：

HTML：

<div>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/500/200" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
    <img src="http://placekitten.com/400/300" class="horiz"/>
    <img src="http://placekitten.com/200/300" class="vert"/>
</div>

CSS：

body,html{
    height: 100%;
}

div{
    white-space: nowrap;
    height: 100%;
}

img{
    min-height: 200px;
    height: 100%;
    vertical-align: top;
}

.horiz{
    max-height: 300px;
}

.vert{
    max-height: 500px;
}

我已经翻遍了Chrome 27 changelog (~13MB)，但没有找到任何有用的信息。

任何想法如何避免图像在 Chrome >= 27 中调整窗口大小时模糊？

Answer 1

如果你想用 CSS 改变图片的尺寸，你应该选择一个尺寸来改变，让另一个尺寸自动调整。

在这种情况下，如果您更关心图像的宽度，您可以去掉 min-height 并执行以下操作：

body,html{
  height: 100%;
}

div{
  height: 100%;
  width: 100%;
  padding: 0;
}

img{
  float: left;
  height: auto;
  vertical-align: top;
  width: 19%;
  margin: 0.5%;
}

参见示例here。

因为我知道你有一排 5 张图片，我们可以使用 19% 的宽度和 div 的宽度并很好地适应它们。

编辑

另一方面，如果您希望控制最小和最大高度，您可以将图像包装在一个容器中，在该容器上指定一个明确的高度，然后将图像放置在容器中。在这里，您将无法控制将所有图像保持在一条线上，同时保持原始纵横比。

这个例子是here。