宽度等于高度，填充问题

我试图做出某种用块做的画廊。所以我搜索了这个问题：“如何设置高度等于宽度”。试用后，它工作。但他们解释的方法是着名的'pading-bottom in % = width in %'。当然，因为有填充，我的图像不能放在盒子里面。宽度等于高度，填充问题

有没有办法将图像放入盒子？

如果您有任何人知道答案或其他方法，请告诉我。

.imagebox{ 
 
border: 1px solid red; 
 
width:25%; 
 
padding-bottom:25%; 
 
float:left; 
 
}

<!DOCTYPEhtml> 
 

 
<html> 
 

 
<head> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="imagebox"> 
 
    <img src=""> 
 
    </div> 
 
    
 
    <div class="imagebox"> 
 
    <img src=""> 
 
    </div> 
 
    
 
    <div class="imagebox"> 
 
    <img src=""> 
 
    </div> 
 
    
 

 
\t 
 
</body> 
 

 
</html>

来源

2015-10-20 Olivier Groeneveld

你可以笑w一些代码？ –

附上小提琴以获得更多理解。 –

诀窍是在父块内部的图像上使用绝对位置（或保存图像的子div）。 –

你的代码工作正常，但随后img增加了高度的div，因此你应该做的相对div，和IMG absolute：

.imagebox { 
 
    border: 1px solid red; 
 
    width: 25%; 
 
    padding-bottom: 25%; 
 
    float: left; 
 
    position: relative; 
 
    overflow:hidden; 
 
} 
 

 
.imagebox img{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="imagebox"> 
 
    <img src="http://lorempixel.com/400/400/?a=1"> 
 
</div> 
 

 
<div class="imagebox"> 
 
    <img src="http://lorempixel.com/400/400/?a=2"> 
 
</div> 
 

 
<div class="imagebox"> 
 
    <img src="http://lorempixel.com/400/400/?a=3"> 
 
</div>

来源

2015-10-20 09:43:52 MoLow

顺便说一句，从www.lorempixel.com添加一些图片，使其看起来不错.. – MoLow

感谢您的答复和答案！我修好了它。 –

如果回答你的问题，请用“V”标记标记为正确答案。 10倍 – MoLow

宽度等于高度，填充问题

回答

相关问题