Geek Answers Handbook

How to put 2 rows of images inside a “column” using flexible boxes

I create a website using flexible boxes. I have a div with 2 "columns" inside and 2 "rows" inside the second "column", which I have to fill with two images each, the problem is that the images do not fit into the "rows" and exceed its width.

I need my images to stretch or shrink with the size of the navigator, so I cannot use px for their size.

This is what I want:

What I want

And here 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>
Run codeHide result

Here is the CODEPEN

PD: Please avoid swimming decisions.

+4
source share
2

#officesImg display:flex. height:100% img, 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>
Hide result

, .

#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>
Hide result
+3

- div.

:

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

.

Chrome, Firefox IE11.

Codepen

+2

More articles:


All Articles