調整圖片大小以適應不斷變化的瀏覽器窗口

-1

如何調整圖片大小以適應瀏覽器窗口？我希望圖像適合在白色框內。我有以下代碼：調整圖片大小以適應不斷變化的瀏覽器窗口

.image { 
    position: relative; 
    width: 100%; 
}

圖像大小應適合大小瀏覽器窗口？目前的照片是〜900px寬。

更新

這是我從Dreamweaver中使用的模板代碼：

.container { 
    width: 80%; 
    max-width: 1260px; 
    min-width: 780px; 
    background-color: #FFF; 
    margin: 0 auto; 
}

如果最大寬度爲1260px，如果圖像是1260px？然後讓它隨着瀏覽器窗口縮小而縮小圖像？

2017-02-04 wellington

嘗試添加'display：block'，並確保所有的pare nt節點也是'width：100％' – jake2389

您編寫的代碼應該使圖像完全展開在白色空間上，如果它是父元素的話。你可能有其他的CSS可以防止這種情況發生 –

我試過了display：block，但是它沒有改變任何東西。我認爲你是對的，它必須是來自父元素的東西。我將圖像寬度設置爲100％，不應該適合容器嗎？ – wellington

這可以用純CSS完成，甚至不需要媒體查詢。爲了使圖像更靈活，只需添加最大寬度：100％和高度：自動。圖像最大寬度：100％和高度：自動在IE7中工作，但不在IE8中（是的，另一個奇怪的IE錯誤）。要解決這個問題，你需要爲IE8添加寬度：auto \ 9。 CSS：

img { 
max-width: 100%; 
height: auto; 
width: auto\9; /* ie8 */ 
}

F你要強制圖像的固定的最大寬度，只需將它放在一個容器內：

<div style="max-width:500px;"> 
<img src="..." /> 
</div>

2017-02-04 19:08:08 Shobhit

你爲什麼不適用CSS代碼：

img {width: 100% }

這應該是個竅門......

2017-02-04 19:12:55 Raphael

我確實嘗試過，但似乎沒有這樣做。我一定在做別的事情，但我無法弄清楚，因爲我幾乎沒有任何代碼。 – wellington

我可以有你的html和css代碼嗎？ – Raphael

回答