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

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

• 不允许放大（如果图片宽度为400像素，我不想将其调整为600）
• 如果包含的元素小于图像，则应缩小图像的比例
• 保持纵横比

例如，我有一个图像（400x300）。如果包含的元素是600像素宽，我想显示400x300的图像。如果包含的元素是200像素宽（例如，它是一个移动浏览器），我想显示200x150的图像

---

我正在寻找一个纯CSS解决方案（如果可能的话），不需要硬连接图像大小。

您应该使用max width属性：

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

这会将图像宽度约束到父div元素，并在必要时缩小图像。它不会丢失纵横比或放大图像。最大宽度在所有最新浏览器中都受支持，但在IE6中不受支持

---

它不会缩小图像的比例阿萨拉蒙74

我将AdamY的代码插入HTML，它确实缩小了图像的比例。这是我得到的一些图像尺寸示例：800w x 626h、962x640、895x640。对于这些图像和其他图像，它会正确地缩放它们——这意味着在img标记中添加“style=”max width:100%；“”后，图像适合我的容器（#photo container）的宽度，并且可以进行缩放。不是说它会在你的代码中起作用，但它对我起了作用。以下是我的相关CSS/HTML代码：

CSS:

HTML:

---

我没有尝试过宽度小于800的照片。

两次使用“最大宽度”属性都可以正常工作：

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

需要注意的是，您的IMG标签需要删除Width&Height属性，否则它将无法正确缩放。

按标签而不使用div框等

img {
width: auto;
height: auto;
max-width: 100%;
}

---

它不会缩小图像的比例。

photo-display.src=myimage;

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

img {
width: auto;
height: auto;
max-width: 100%;
}