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＆gt; = 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。

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

1 个答案: