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;
}

Answer 2

我假设您已经使用 IMG 标签在不同的地方以不同的大小显示相同的图像。要以正确的比例显示图像，请设置其中一个尺寸，即；宽度或高度另一个将自动调整：示例：

<img src="mypic.png" width="75px" /> 

在上面的代码中，图像标签会自动调整高度以获得正确的比例。

希望这可以帮助

Answer 3

根据我的经验，您必须将图像宽度设置为父级的 100%，才能在调整图像大小时获得一致的结果。仅设置最大宽度并不能保证图像将填充父级。这将。

.container {
    overflow:hidden;
}    

.container img {
    width: 100%;
    height: auto;
}

.container100 {
    width: 100px;
    height: 100px;
}

.container75 {
    width: 75px;
    height: 75px;
}


<div class="container container100">
    <img src="path-to-img" alt="appropriate alt text">
</div>