Keeping image aspect ratio in a division

Question

I have a division with n-number of divs which consist of images of different sizes:

<div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<div> <img ng-src="{{backgroundImage}}" />  </div>
<!-- dynamically the images will be loaded --> 
</div>

The functionality I am looking for is:

They have to flow in one row regardless of the number of images, which means they should re-size to smaller images if there is a large number of images.
The images aspect ratio has to be kept on re-sizing
The div should be all equal width and height on re-sizing
What I'd actually like is for each image to be aligned within a square that is consistently sized with all of the other images. Each image should be constrained and re-sized within their own square. Then I want all of the containing squares to be sized across the row. So as the number of images increases the size of the squares decrease accordingly.

I have tried and searched a lot for the solution, but nothing worked. Please demonstrate some real examples with the functionality I mentioned above.

What you want to say is the square division wont go to next line but as no. of divs increases it gets smaller in size ? — Keyur Sakaria, Dec 21 '15 at 12:49
yes exactly with images in that re-sized div keeps the aspect-ratio — sampu, Dec 21 '15 at 12:51
You might wanna look at flexiboxes. All your requirements should be possible to do with pure css. — BroiSatse, Dec 21 '15 at 12:57

score 2 · Answer 1 · answered Dec 21 '15 at 13:28

I'd prefer using pure css and html, something like this:

<div class="ratio-16-9">
    <img src="http://www.w3schools.com/html/pic_mountain.jpg" alt="Mountain View">
</div>

<style>
    .ratio-16-9,
    .ratio-12-9,
    .ratio-1-1 {
        display: block;
        position: relative;
        height: 0;
        overflow: hidden;
        padding-bottom: 56.25%;
    }

    .ratio-16-9 img,
    .ratio-12-9 img,
    .ratio-1-1 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .ratio-1-1 {
        padding-bottom: 100%;
    }

    .ratio-12-9 {
        padding-bottom: 73.47%;
    }
</style>

thanks for the answer, but i need n-number of division with images in all n-divisions, in one row — sampu, Dec 21 '15 at 14:14

score 0 · Answer 2 · answered Dec 21 '15 at 12:59

This should fulfill your requirement. set the total no. of image to variable imageCount and the code will calculate accordingly. Right now i have given background red. You can set image url when you use

    var imageCount = 27;

    var width = window.innerWidth;
    var divWidth = width/imageCount;
    var html = "";
    for(var i=0;i<imageCount;i++)
    {
        html+= "<div style='float:left; width: "+divWidth +"px;height: "+divWidth +"px;background: red; background-size:100% 100%'></div>";
    }
    document.getElementById("images").innerHTML = html;

 *{
        padding: 0;
        margin: 0;
    }

<div id="images">

</div>

Thanks for reply can you be more specific, i have 2 divs: 1 for wrapper, 2 for image holder — sampu, Dec 22 '15 at 09:54

score 0 · Answer 3 · answered Dec 21 '15 at 13:19

0

Use flexbox, or, you can use a table.

answered Dec 21 '15 at 13:19

arrow

174
3
15

You should NOT use tables for layout. See http://stackoverflow.com/a/84986/3415618 – Jeremy Dec 24 '15 at 20:52

score 0 · Accepted Answer · answered Dec 21 '15 at 14:45

You can try something like this, although it requires an additional div:

* {
  margin: 0;
  padding: 0;
}
.outer-wrap-img {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.inner-wrap-img {
  display: table-cell;
}
.inner-wrap-img div {
  padding-bottom: 100%;
  position: relative;
}
.inner-wrap-img div img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
}
.red {
  background: #F00;
}
.green {
  background: #0f0;
}

<div class="outer-wrap-img">
  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>
  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="red">
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
    </div>
  </div>

  <div class="inner-wrap-img">
    <div class="green">
      <img src="http://www.gettyimages.com/gi-resources/images/CreativeImages/Hero-527920799.jpg" />
    </div>
  </div>



</div>

its helpful but one quick question i want the wrapper height size to be fixed, when less or more images added for one particular resolution — sampu, Dec 22 '15 at 13:35

Keeping image aspect ratio in a division

4 Answers4