Question

我有div width:200px; height:200px这个div应该永久大小但不是。我想放入div img，我可以使用填充10px或20px每边取决于用户的配置。 img尺寸大于200px，实际上它。我的问题是当我玩填充时div不是永久大小它根据填充改变。我想用db的大小分隔填充。感谢任何帮助。

我的代码：

<!DOCTYPE html>
<html>
<head>

  <style type='text/css'>
    img{
width:180px;
height:180px;
margin:20px;        
}

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    hieght:200px;
}

</style>
</head>
<body>
<div class="container">
    <img src="http://gfx.glittergraphicsnow.com/albums/ll149/glittergn/flower/flower002.gif" >
</div>
</body>
</html>

以下是Demo Link:

Answer 1

如果要在元素的宽度中包含padding，则需要在该元素上使用box-sizing:border-box;。

正如@bski在评论和@ AshwinSingh的回答中所提到的那样 - 你也应该使用overflow: hidden隐藏任何溢出的内容。

.container{
    background-color:orange;
    padding:100px;
    width:200px;
    height:200px;
    /* add this */
    overflow: hidden;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
    box-sizing:border-box;
}

Answer 2

正常的行为是，即使你给它一个固定的大小，div也会占用它内部内容的大小。如果内部内容的总大小大于div的大小，div将自动调整大小以保存内容。记住，div是一个容器，它包含东西。

我建议使用width:100%和height:100%，使其调整大小足以容纳内容，包括所有边距和填充。

如果要停止该行为并使用固定宽度而不是overflow:hidden属性，这将隐藏任何溢出div的内容。如果你想要一个滚动条而不是overflow:scroll属性，当内容溢出时，这将显示一个滚动条。

更新正如罗杰·金指出的那样，height:200px拼写为hieght:200px

如何用永久大小的div内的动态填充填充img？

2 个答案: