圖像忽略父節點上的最大寬度

如果我在身體標記上設置最大寬度css樣式，並且身體內的圖像比身體的最大寬度寬，圖像將不服從最大寬度。我想讓圖像調整大小，而不是僅僅隱藏溢出。圖像忽略父節點上的最大寬度

爲什麼？

你如何解決這個問題？

小提琴：http://jsfiddle.net/pRMzs/

來源

2011-12-28 Tyilo

的圖像是比身體更大，因此身體會擴大。你想要發生什麼？你是否期待圖像被剪切或調整大小？ – rid 2011-12-28 22:12:44

它會調整大小，以便身體具有最大寬度的大小。 – Tyilo 2011-12-28 22:13:27

圖像應調整大小的規範需要編輯到這個原始問題。我在第一次發佈之前沒有看到它。 – Brian 2011-12-28 22:47:50

最大寬度不自動繼承。

如果你想具體的標籤繼承樣式寬度，你必須明確地指定它做的，就像這樣：

body 
{ 
    max-width: 200px; 
} 

img 
{ 
    max-width: inherit; 
}

編輯：這裏的鏈接到規範http://www.w3.org/wiki/CSS/Properties/max-width

來源

2011-12-28 22:14:36 Sologoub

但是，有一個問題：http://jsfiddle.net/pRMzs/10/ – Tyilo 2011-12-28 22:17:18

是的，最大寬度和最小寬度不包括填充，邊框或邊距。這裏有一個很好的寫在計算CSS框的總寬度和高度：http://reference.sitepoint.com/css/boxmodel – Sologoub 2011-12-28 22:36:32

圖像不根據家長max-width大小進行縮放。你需要擴展自己以適應內容中的圖像，使它們inherit父寬度，或設置max-width:200px;

如果你不想比例的照片，但不希望父元素得以舒展，只是使用overflow:hidden並且圖像的額外部分將被隱藏。

來源

2011-12-28 22:16:09

溢出：隱藏似乎並不工作：http://jsfiddle.net/9dXyx/1/ – Sologoub 2011-12-28 22:29:53

作爲一個經驗法則，在body標籤上設置寬度（尤其是max-width）是不好的做法，因爲我不會在這裏進入。

在這種情況下，您可以選擇使用body標記來定義導致您頭痛的寬度。

這裏是我的jsfiddle：http://jsfiddle.net/pRMzs/17/

得到你正在尋找該效果的唯一方法是使用一個#container DIV某種（CSS的就不能針對body標籤）。

爲了使上計算器的答案可見的緣故...

編輯：請求已作出圖像流爲100％的容器的大小。只需在圖像中添加width: 100%即可。給它一個特殊的類來避免這種影響對所有<img>的

您需要的HTML是：

<!doctype html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test</title> 
    </head> 
    <body> 
     <div id="container"> 
      <img src="http://www.prepolino.ch/sprache/trennen/bilder/test.gif"> 
     </div> 
    </body> 
</html>

和CSS：

body 
{ 
} 
#container { 
    padding: 10px; 
    max-width: 200px; 
    overflow: hidden; 
    background: red; 
} 
img { 
    width: 100% 
}

來源

2011-12-28 22:35:07 Brian

但是，這並沒有調整圖像大小 – Tyilo 2011-12-28 22:41:36

這很容易修復：http://jsfiddle.net/pRMzs/17/ – Brian 2011-12-28 22:43:43

圖像上的邊緣會破壞它。 – Tyilo 2011-12-28 23:17:25

圖像忽略父節點上的最大寬度

回答

相關問題