Width equal to height, problems with padding

Question

I tried to make some kind of a gallery made out of blocks. So I searched for the question: "How to set height equal to width". After trying it out it worked. But the method they explained was the famous 'pading-bottom in % = width in %'. And of course since there is a padding my image can't be placed inside the box.

Is there a way to place the image inside the box?

If any of you know the answer or another method, please let me know.

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

The trick is to use absolute position on the image (or a child div holding the image) inside the the parent block. — Paulie_D, Oct 20 '15 at 08:56
Probable duplicate - http://stackoverflow.com/questions/1495407/how-to-maintain-the-aspect-ratio-of-a-div-using-only-css — Paulie_D, Oct 20 '15 at 08:58

score 0 · Accepted Answer · answered Oct 20 '15 at 09:43

0

your code works OK, but then the img adds height to the div, so you should make div relative, and 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>

answered Oct 20 '15 at 09:43

MoLow

3,056
2
21
41

Thanks for the reply and answer! I fixed it. – Olivier Groeneveld Oct 20 '15 at 17:05
if this answerd your question, please mark it as a correct answer, with the "V" sign. 10x – MoLow Oct 20 '15 at 19:35

Width equal to height, problems with padding

1 Answers1