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

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; 
}

预期效果如下。

来源

2016-05-14 it_is_a_literature

在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">

来源

2016-05-14 08:28:23 LGSon

这里有一些选择：

如果你没事使用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>

来源

2016-05-14 08:10:59 timolawl

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

回答

相关问题