Pinterest是如何保持图片高度成比例的？

Question

我想要在一列中加载一堆随机的图片（它们的宽度和高度不同）。这一列将有一个固定的宽度，并且高度将按比例裁剪以保持图像原始的高宽比（类似于Pinterest的展示方式）。

有人知道如何使用JavaScript或JQuery实现这个功能吗？

- Davey

Answer 1

您可以仅使用CSS来实现此功能：

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

这将使您站点中的图像保持固定宽度（如果您不希望所有图像具有完全相同的宽度，则使用 max-width），高度将自动调整以保持纵横比。

当然，如果您想使用 JavaScript 或 jQuery，您可以在脚本中设置 CSS 属性。这只是一种无需麻烦的方法。

- miguelarcilla