如何在瀏覽器中填充整個身體？

Question

div{ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

那麼div會填補我的Firefox全身。

這是不聰明的方式，當img的填充改爲40px時，div的寬度將改爲160 + 40 + 40 = 240。

div{ 
    width:200px; 
    border:1px solid red; 
} 

預期效果如下。

Answer 1

在div上使用display: inline-block，它會擴展到它的con帳篷而不是其父寬度。

側面說明，別忘了所需的屬性alt="an image description"

div{ 
 
    display: inline-block;  /* added */ 
 
    overflow:hidden; 
 
    border:1px solid red; 
 
} 
 
img{ 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description"> 
 
</div>

你可以做到這一點沒有股利，除非它是需要爲特定目的。

img { 
 
    width:160px; 
 
    height:160px; 
 
    padding:20px ; 
 
    border:1px solid red; 
 
}

<img src="http://i.imgur.com/MnmGmN7.jpg" alt="image description">

Answer 2

這裏有一些選擇：

如果你沒事使用intrinsic sizing，您可以使用fit-content。但是，IE/Edge不支持這些值。

div { 
 
    border: 1px solid red; 
 
    width: -moz-fit-content; 
 
    width: -webkit-fit-content; 
 
    width: fit-content; 
 
} 
 
img { 
 
    width: 160px; 
 
    height: 160px; 
 
    padding: 20px; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>

作爲替代方案，可以隨時指定容器的大小，使圖像的容器中，像這樣的百分比：

div { 
 
    border: 1px solid red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 
img { 
 
    width: 80%; 
 
    height: 80%; 
 
    padding: 10%; 
 
}

<div> 
 
    <img src="http://i.imgur.com/MnmGmN7.jpg" /> 
 
</div>