CSS保存图像宽高比

Question

我有一些尺寸以英寸为单位的图形:

4.25 x 6.875
5.5 x 8.5
6 x 9
8.5 x 8.5
8.264 x 11.694

我想对图形进行简化预览(我会迭代所有尺寸,我想要显示每个图像,只有一个DIV),但我想保存纵横比.我想知道这将是DIV的最佳尺寸,以避免每个图像变形.

Answer 1

如果您设置max-width并max-height在图像上,但未设置height或width,则图像将被限制为您定义的尺寸,同时保持纵横比.

例:

<img src="big_image.png" style="max-width: 100px; max-height: 100px;" />

如果big_image.png是4000乘2000像素,它将被渲染为100乘50.