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%;
    }

2个Div标签中的相邻图像

1 个答案: