响应式 CSS 对齐 2 列图像

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 列图像

Responsive CSS Aligning 2-column Images

html

css

styling

responsive-design