javascript - Pinterest 如何保持图片高度成比例

Question

我想将一堆随机图像（宽度和高度不同）加载到一列中。该列将具有固定的宽度，并且必须按比例裁剪高度以保持图像的原始高宽比。（类似于 Pinterest 如何构建他们的董事会。）

任何人都知道如何使用 Javascript 或 JQuery 来实现这一点？

Answer 1

你可以只使用css：

img.autosize {
    width: 500px; /*Specify your width here*/
    height: auto;
}

这将使您站点中的图像保持固定宽度（使用max-width以防您不希望所有图像都具有完全相同的宽度）并且高度将相应地自行调整以保持纵横比。

当然，如果你想使用 javascript 或 jQuery，你可以在你的脚本中设置 css 属性。这只是一种轻松的方式。