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

Make images fill container that is 100% width

本文关键字：图像 填充 100%      更新时间：2023-09-26

我想让这些图像填充容器的宽度，所以没有空白(或者在下面的例子中，没有黄色空间)。

因为容器宽度是100%，所以我不能在image元素上设置百分比宽度。如果我这样做的话，我最终会在更小的设备上看到很小的图像。

这里的解决方案是什么?我不介意稍微调整一下图像的大小，使它们完美地适合容器，但没有太大的变化。

http://jsfiddle.net/28cyyb2m/

<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>

改变你的图像有一个均匀可分割的宽度百分比，并使高度自动。例如:

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/

你可以只用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/

可以通过display options table和table-cell来实现。

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

这将使图像宽度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%;
}
相关文章：