使用像素和百分比約束的 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%;
}