寬度等於高度，填充問題

我試圖做出某種用塊做的畫廊。所以我搜索了這個問題：「如何設置高度等於寬度」。試用後，它工作。但他們解釋的方法是着名的'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

寬度等於高度，填充問題

回答

相關問題