gpt4 book ai didi

javascript - 调整图像组的大小以适应容器,所有图像高度相同

转载 作者:太空宇宙 更新时间:2023-11-04 15:05:22 25 4
gpt4 key购买 nike

我有一个要求,在一个设置为窗口宽度的容器中有一到四个图像。

图片可以有不同的大小。

在 javascript 中,我必须在保持宽高比的同时调整所有图像的大小,以便所有图像具有相同的高度,并且它们都在窗口宽度内彼此相邻地排成一行。

html结构可以如下: http://jsbin.com/uhonaz/2/

谢谢

最佳答案

这可以用这样的 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 + '%');

关于javascript - 调整图像组的大小以适应容器,所有图像高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15953878/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com