CODEWITHSUNDEEP
htmlcssflexbox
GhostOrder
GhostOrder

Reputation: 663

How to put 2 rows of images inside a 'column' using flex boxes

I'm building a site using flex boxes. I have a div with 2 'columns' inside, and 2 'rows' inside of the second 'column' which I have to fill with two images each, the problem is the images doesn't fit into the 'rows' and exceeds its width.

I need my images stretch or shrink with the navigator size, so I can't use px for their size.

This is what I want:

What I want

And this is what I get:

What I get

Here is my code:

#offices {
  background: peachpuff;      
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.col {
  background: yellow;
  flex: 1;      
}
.row {
  background: red;
  line-height: 0;
  display: flex;
}
#officesImg img {
  flex: 1;
  width: 100%;
  height: 100%;
}
<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

Here is a CODEPEN

PD: Please avoid float solutions.

Upvotes: 4

Views: 4437

Answers (2)

Stickers
Stickers

Reputation: 78686

You can set #officesImg to display:flex. And removed height:100% from the img that causes aspect ration issue on Firefox.

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
}
#officesImg img {
  width: 100%;
  height: auto;
}
<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

Here is a slightly polished version that matches your wireframe.

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
  padding: .5em;
}
#officesImg img {
  width: calc(100% - 1em);
  height: auto;
  margin: .5em;
}
<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

Upvotes: 3

Michael Benjamin
Michael Benjamin

Reputation: 371261

The quickest solution is to wrap each image element in a div.

In other words:

<div><img ... ></div>

Images remain responsive and aspect ratio is maintained.

Tested in Chrome, Firefox and IE11.

Revised Codepen

Upvotes: 2

Related Questions