如何在浏览器中填充整个身体？

Question

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

div会在我的Firefox上填满整个身体。

这不是一种聪明的方式，当img的填充变为40px时，div的宽度将变为160 + 40 + 40 = 240。

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

期望的效果如下

Answer 1

在div上使用display: inline-block，它将扩展到其内容而不是其父宽度。

旁注，请勿忘记所需的属性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>

除非出于特定目的需要，否则您也可以在没有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>