jQuery动态比例元素/图像调整大小

Posted 2023-03-06

【中文标题】jQuery动态比例元素/图像调整大小

【英文标题】：jQuery dynamic proportional element/image resize

【发布时间】：2012-02-28 18:34:48

【问题描述】：

我试图让图像与其包含的元素成比例地调整大小，唯一的问题是我正在努力让每个图像容器的高度与其在窗口调整大小时改变的宽度成比例地调整大小，每个图像容器的宽度都设置为主容器元素宽度的 25%。

我现在需要做的是让每个图像容器在窗口调整大小时按比例调整大小，并使其各自容器内的每个图像随之增长，但保持它的纵横比。

这是我目前所拥有的，http://jsfiddle.net/pPWVd/。

【问题讨论】：

曾经问过这样的问题，也许这会有所帮助.. [***.com/questions/643500/… [1]: ***.com/questions/643500/…

【参考方案1】：

我修改了你的小提琴 (http://jsfiddle.net/pPWVd/5/) 以反映你所描述的想法。保持纵横比的关键是只设置一个维度（宽度或高度）。另外，我将item 的显示设置为block，因为它正在获取width 并被浮动。

根据您的情况，您确实不需要额外的div 包装器来实现效果，请参阅http://jsfiddle.net/pPWVd/7/。虽然如果您将其他内容放入 item，那么您将希望保持原样。