使用像素和百分比约束的 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 不支持

Answer 3

它不会缩小图像。 – asalamon74

我将 AdamY 的代码插入到我的 HTML 中，它确实缩小了图像的尺寸。 这是我得到的一些图像尺寸示例：800w x 626h、962x640、895x640。 对于这些和其他人，它正确地缩放了它们 - 这意味着在将“style="max-width:100%;"”添加到 img 标签后，图像适合我的容器 (#photo-container) 的宽度，并且规模。 并不是说它会在你的代码中工作，但它对我有用。 这是我的相关 CSS/HTML 代码：

CSS：

#photo-container {display:block; float:left; width: 800px; 
                    margin-left:5px; margin-top:0px;
                    padding: 10px 10px 10px 10px;
                    background-color:black; color:white;
                    border-bottom-left-radius: 0.5em;
                    border-bottom-right-radius: 0.5em;
                }  

HTML：

    <div id="photo-container">
        <img id="photo-display" src="PlaceHolder" alt="PlaceHolder"  
         style="max-width:100%;">
    </div>

这些图像实际上是使用 javascript 放置的。 对于这个主题，我的 javascript 代码中的选择过程有点冗长，但本质上它等同于：

photo-display.src=myimage;

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

Answer 4

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

Answer 5

通过标签 <img> 不使用 div 框等。

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