Two images side by side and responsive

Question

I\'m trying to put two images side by side and make them responsive. The problem now is, that the second image wraps first and then reacts to the size of the browser. I want

Answer 1

use display table to set it side by side and keep it side by side and responsive.

display: table; with table-layout: fixed; will create a fluid layout for child elements with display: table-cell;

this will not only keep them the same width but also keep the containers the same height.

vertical-align: top; will keep them aligned to the top alternatively you can change the vertical position to middle and bottom plus some others.

Any questions just fire away.

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}
#outer {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.itemwrapper {
  display: table-cell;
  vertical-align: top;
  width: 100%;
}
img {
  max-width: 100%;
  height: auto;
}

<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="item2.jpg" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="item3.jpg" alt="pen" />
    </div>
  </div>
</div>

Answer 2

Thanks for the help, but I'm doing it with a different solution now, whicha friend suggested:

#outer {
  position: relative;
  width: 50%;
  height: 0;
  margin: 30px auto 0 auto;
  padding-top: 25%;
  background-color: #999;
}
    
.itemwrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
}
    
.item2 {
  left: 50%;
}

#outer img {
  height: 100%;
  max-width: 100%;
}

<div id="wrapper">
  <div id="outer">
      <div class="itemwrapper">
        <img src="http://lorempixel.com/200/100" alt="bag" />
      </div>
      <div class="itemwrapper item2">
        <img src="http://lorempixel.com/400/200" alt="pen" />
      </div>
  </div>
</div>

This evokes another problem though. The images arent filling the itemwrappers. I think i need to write some js for this :S.

Answer 3

if image are same size or same ratio, you may use flex , width and min-width to set a break point:

#outer {
  width:70%;/* demo*/
  margin:auto;/* demo*/
  display:flex;
  flex-wrap:wrap;
}
#outer>div {flex:1;}
#outer>div>img {
  width:100%;
  min-width:200px;/* demo*/
}

<div id="wrapper">
  <div id="outer">
    <div class="itemwrapper">
      <img src="http://lorempixel.com/200/100" alt="bag" />
    </div>
    <div class="itemwrapper">
      <img src="http://lorempixel.com/400/200" alt="pen" />
    </div>
  </div>
</div>

remove or reset to your needs the rules commented with demo.