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

我有div width:200px; height:200px这个div应该是永久大小，但不是。我想把里面的img我可以玩填充10px或20px每边取决于用户的配置。 img尺寸大于200px，实际上它。我的问题是当我玩填充div不会永久大小它根据填充更改。，我想分隔大小div的填充。 Thx寻求帮助。如何使用永久大小填充img动态填充内部div？

我的代码：

<!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:

来源

2012-07-01 yossi

把溢出属性 – bksi

。

正如@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; 
}

来源

2012-07-01 11:36:28

Thx这是正确的答案。 – yossi

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

我会推荐使用width:100%和height:100%，使其大小足以容纳内容，包括所有边距和填充。

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

UPDATE罗杰王指出的那样，你就height:200px如果你想在你需要该元素上使用box-sizing:border-box;元素的宽度padding拼错为hieght:200px

来源

2012-07-01 11:09:15

嗨，我想'div的大小宽度：200px; hieght：200px;'我将溢出隐藏的属性添加到'.container {'那不是你可以在这里看到[Demo link]（http://www.centerwow.com/stackoverflow/temp3.html） – yossi

看看你的拼写错误的代码高度：200px as hieght：200px –

@AshwinSingh它与高度无关，这是因为填充是“div”而不是图像，因此“overflow：hidden”不起作用。 –

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

回答

相关问题