Question

我希望这些图像能够填充容器宽度，因此不会出现空白区域（或者在下面的示例中，没有黄色空间）。

由于容器宽度为100％，我无法在图像元素上设置百分比宽度。如果我这样做，我最终会在较小的设备上显示小图像。

这里有什么解决方案？我不介意重新调整图像尺寸以使它们完美地适合容器，但没有什么大不了的。

<div class="test">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
    <img src="..">
</div>

Answer 1

将图像更改为具有可均分的宽度百分比，并使高度自动。例如：

img {
    width:25%; /* 4 images across */
    height:auto;
}

如果移动设备上的4张图片太小，请使用媒体查询在移动设备上将宽度更改为50％或100％。

例如：

@media (max-width: 600px) {
    img {
        width: 50%; /* 2 images across */
    }
}

这是一个更新的小提琴：http://jsfiddle.net/g84yu198/

Answer 2

只有使用JavaScript后，您才能完成自己的工作。这是一个jQuery示例，说明如何执行此操作：

$(function() {
    var resizeImages = function() {
        var minimumWidth = 100;
        var containerWidth = $('.test').width();
        var numberPerRow = Math.floor(containerWidth / minimumWidth) - 1;
        var actualWidth = containerWidth / numberPerRow;

        $('.test img').css({width: actualWidth});
    }

    $(window).on('load resize', resizeImages);

});

它使用minimumWidth来阻止您的图片变得太小，并且尽可能多地放入一行而不会破坏该规则（因此您的图片也不会太大）。

这是一个JSFiddle：http://jsfiddle.net/n05t55bt/1/

Answer 3

您可以使用显示选项表和表格单元格来执行此操作。

.gallery {
  display: table;
  width: 100%;
  height: 100px;
  background: red;
}
.gallery .image {
  display: table-cell;
  width: auto;
  background: blue;
  height: 50px;
}

https://jsfiddle.net/qq8py50j/

Answer 4

这使图像宽度为100％全屏。

body, html, .test {
    display:block;
    background:yellow;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-size:0;
}
img {
    width:100%;
}

使图像填充100％宽度的容器

4 个答案: