html - 是否可以以正确的比例渲染两种尺寸的图像

Question

我有一个网站，上面的产品只有一张图片与之关联。图片尺寸一般为+200 X 200+。在一个地方，我想以 100X100 显示图像，在另一个地方以 75X75 显示图像。

是否可以按相同比例正确显示图像。现在，图像在某些地方看起来很胖或很长或很瘦。

Answer 1

如果您仅设置图像的高度或宽度，则其他维度会按比例调整大小。

因此，如果您的图像容器是 100X100 像素，您可以像这样设置图像样式:

div.imageContainer100X100px img {
    max-width: 100px;
    max-height: 100px;
}

或者对于 75X75 像素:

div.imageContainer75X75px img {
    max-width: 75px;
    max-height: 75px;
}