宽度等于高度，填充问题

Question

我试图用积木制作某种画廊。所以我搜索了这个问题："How to set height equal to width"。试过之后就成功了。但是他们解释的方法就是大名鼎鼎的'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>
  

 
</body>

</html>

Answer 1

你的代码工作正常，但是 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>

宽度等于高度，填充问题

Width equal to height, problems with padding

html

css

dynamic