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

【问题标题】：Is it possible to render an image in two sizes with correct proportion是否可以以正确的比例渲染两种尺寸的图像
【发布时间】：2013-05-03 14:46:26
【问题描述】：

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

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

【问题讨论】：

标签： html css asp.net-mvc-3 image

【解决方案1】：

如果您将ONLY设置为图像的高度OR，则其他尺寸会按比例调整大小。

所以，如果你的图片容器是 100X100 像素，你可以像这样设置图片的样式：

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

或者对于 75X75 像素：

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

【讨论】：

这是一个不错的解决方案伙伴......非常感谢......在一个地方检查过，似乎工作得很好
不客气。很高兴能对你有所帮助。您可以将其标记为答案以供将来参考。

【解决方案2】：

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

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

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

希望对你有帮助

【讨论】：

【解决方案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>

【讨论】：