HTML自动图像使用像素和百分比约束调整大小

Question

如何使用以下约束将图像添加到HTML页面:

• 不允许升级(如果图片宽度为400像素,我不想将其调整为600).
• 如果包含元素小于图像,则应缩小图像.
• 保持长宽比例.

例如,我有一个图像(400x300).如果包含元素宽度为600像素,我想将图像显示为400x300.如果包含元素的宽度为200像素(例如它是移动浏览器),我想将图像显示为200x150.

我正在寻找一个纯CSS解决方案(如果可能的话)而没有硬连接图像大小.

Answer 1

使用max-width属性两次正常工作:

<div style="max-width: 400px" >
<img src="image.jpg" style="max-width:100%;" />
</div>

Answer 2

您应该使用max-width属性:

<div style="width:600px">
<img src="images/image.jpg" alt="image" style="max-width:100%;"/>    
</div>

这会将图像宽度限制为父div元素,必要时向下缩放图像.它不会丢失其宽高比或缩放图像.所有最新的浏览器都支持max-width,但在IE6中不支持