Question

我有一个网站，产品只有一张相关的图片。图片的尺寸通常为 +200 X 200 + 。在一个地方，我想以100X100和其他75X75显示图像。

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

Answer 1

如果您设置仅图像的高度 OR 宽度，则另一个尺寸会按比例调整大小。

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

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

或75X75 px：

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>

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

3 个答案: