Question

我正在使用下面的HTML / CSS在屏幕宽度的100％处将一些较小的图像放在一个较大的图像旁边。我希望它保持其宽高比，在调整浏览器大小时，它在Firefox和IE中看起来很好用。但Chrome并没有使高度一致平稳，似乎使得一方或另一方1px关闭。

http://jsfiddle.net/gxb33ex5/

img {
  float: left;
}

img.large {
  width: 70%;
}

img.small {
  width: 30%;
}

<a href="#">
    <img alt="Test Large" class="large" src="http://prizem.dreamhosters.com/test/test_large.jpg">
</a>
<a href="#">
    <img alt="Test Small 1" class="small" src="http://prizem.dreamhosters.com/test/test_small_1.jpg">
</a>
<a href="#">
    <img alt="Test Small 2" class="small" src="http://prizem.dreamhosters.com/test/test_small_2.jpg">
</a>

有关如何正确使双方按70/30％分割响应，保持宽高比并修复此1px Chrome差异的任何建议？谢谢！

Answer 1

你想要一些非常奇怪的东西......但是你可以使用这样的东西：http://jsfiddle.net/gxb33ex5/1/至少这是有效的，正如我所看到的。切断这些像素：

.wrapper {overflow:hidden;}

响应式CSS对齐2列图像

1 个答案: