是否有可能在两种尺寸与正确比例呈现图像(Is it possible to render an im

我有一个网站上的产品有与之相关联的只有一个PIC。 图片的尺寸一般+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>

文章来源: Is it possible to render an image in two sizes with correct proportion