是否有可能以正确比例的两种尺寸呈现图像

我有一个网站，其产品只有一张图片与它们相关联。图片的尺寸一般为+ 200X200 +。在一个地方，我想在100X100和其他75X75中显示图像。是否有可能以正确比例的两种尺寸呈现图像

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

2013-05-03 Pankaj Upadhyay

如果您设置了仅限于的高度或图像的宽度，另一维度会按比例调整大小。

所以，如果你的图像容器是假设100x100像素，你可以风格类似这样的形象：

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

或为75X75像素：

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

来源

2013-05-03 06:22:06 Arbel

这是一个体面的解决方案队友....非常感谢...检查它在一个地方，似乎工作得很好 – 2013-05-03 06:43:35

不客气。很高兴为您提供帮助。您可以将其标记为将来参考的答案。 – Arbel 2013-05-03 06:47:51

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

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

在上面的代码图像标签将自动调整为适当比例的高度。

希望这有助于

来源

2013-05-03 06:24:23

以我的经验，你必须设置图像宽于母公司的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>

来源

2013-05-03 06:46:26 Timidfriendly

是否有可能以正确比例的两种尺寸呈现图像

回答

相关问题