调整图像组的大小以适合容器,所有图像都具有相同的高度

wodio 发布于 2019-03-09 css 最后更新 2019-03-09 14:37 0 浏览

我有一个要求,在一个容器内设置一个到四个图像的窗口宽度。 图像可以是所有不同的大小。 在JavaScript中,我必须调整所有图像的大小,同时保持宽高比,以便所有图像具有相同的高度,并且它们都在窗口宽度内彼此相邻。 html结构可能如下所示: http://jsbin.com/uhonaz/2/ 谢谢

已邀请:

gquia

赞同来自:

这可以通过CSS完成,如下所示:

img{
    height:100%;
    width:auto;
}
如果你想让四个图像适合同一行,你可以这样做:
img{
    height:100%;
    max-width: 25%;
    width: auto;
}
对于未确定数量的图像,尝试一些JavaScript(我使用的是jQuery):
width = 100/$('img').length;
$('img').css('max-width', width + '%');