1 个 div 标签中的 2 个相邻图像

Question

我正在使用一个宽度为 960 的容器，其中包含一堆照片。有些图片是垂直的，有些是水平的。两张相邻的带有填充的垂直图片总和是水平图片的宽度，这导致两张垂直图片（彼此相邻）然后是一张水平图片的布局很好。这是一个示例（在桌面或手机上查看）：http://issaquahparagliding.com/2014/05-20.php

这适用于台式机和手机。然而，在平板电脑上，垂直图片不会调整大小，而是重新堆叠，一个在另一个之上。这会导致右侧出现一堆空白。我希望他们调整大小以适应 div 并彼此对齐。此图可能有助于解释：http://issaquahparagliding.com/images.png

我被卡住了，有什么想法吗？

谢谢

Answer 1

这是因为这行 CSS：

#pics img {
    max-width: 100%;
}

发生了什么，max-width 声明在容器小于一个图像之前无效。因此，在并排有 2 个图像的情况下，它们不会对声明做出反应，因为它不适用，因为容器/屏幕仍然大于单个图像。对于任何垂直的图像，您需要为它们分配一个类并调整它们的 CSS。

例子：

<img src="05-20/01_05-20-14%20copy.jpg">
<img class="image-half" src="05-20/02_05-20-14%20copy.jpg">
<img class="image-half" src="05-20/03_05-20-14%20copy.jpg">
<img src="05-20/04_05-20-14%20copy.jpg">

#pics img {
        max-width: 100%;
    }
#pics img.image-half {
        max-width: 50%;
    }