Question

我试图制作某种用积木制成的画廊。所以我搜索了一个问题：“如何设置高度等于宽度”。尝试后，它工作。但他们解释的方法是着名的'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：

＆＃13;

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

＆＃13;

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

＆＃13;

宽度等于高度，填充问题

1 个答案: