HTML圖像自動調整使用像素和百分比限制

我如何使用以下約束的圖像添加到HTML頁面：HTML圖像自動調整使用像素和百分比限制

沒有允許倍增（如果圖片寬度爲400像素，我不想調整到600）。
如果包含元素小於圖像，則圖像應該縮小比例。
保持寬高比。

例如我有一個圖像（400x300）。如果包含的元素寬度爲600像素，我想將圖像顯示爲400x300。如果包含的元素寬度爲200像素（例如，它是一個移動瀏覽器），我想以200x150顯示圖像。

我正在尋找一個純粹的CSS解決方案（如果可能的話），而不用硬連線圖像大小。

2012-01-17 asalamon74

嘗試使用它最大寬度財產兩倍正常工作：

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

來源

2012-12-09 13:14:25 asalamon74

您應該使用MAX-width屬性：

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

這會限制你的圖像寬度父div元素，如果有必要向下縮放圖像。它不會失去寬高比或放大圖像。最大寬度在所有支持的最新的瀏覽器，但不是在IE6

來源

2012-01-17 14:59:12 AdamY

它不縮減圖像。 – asalamon74 2012-01-17 19:53:51

它不會縮減圖像。 - asalamon74

我插上AdamY的代碼到我的HTML和它縮減圖像。以下是我獲得的圖像尺寸示例：800w x 626h，962x640,895x640。對於這些和其他人，它適當地縮放它們 - 意味着在向img標籤添加'style =「max-width：100％;''後，這些圖像適合我的容器寬度（＃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

來源

2012-11-21 22:09:30

應當注意的是，你的IMG標籤需要有寬& Height屬性去掉，否則將無法正確縮放。

來源

2013-05-14 19:28:37

標籤< img>不使用div盒等

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

來源

2017-11-26 11:53:48

HTML圖像自動調整使用像素和百分比限制

回答

相關問題