Two images side by side and reacting

Question

I am trying to put two images side by side and make them responsive. The problem is that the second image first wraps and then reacts to the size of the browser. I want them to stay on the same line (level) and automatically resize and wrap at a certain point (this part is not a problem) ....

html:

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

css:

#wrapper {
  max-width: 1050px;
  margin: 60px auto 60px auto;
  background-color: #DDD
}

.itemwrapper {
  display: inline;
}

img {
  max-width: 100%;
  height: auto;
}

Does anyone help?

Answer 1

use the mapping table to set it next to each other and keep it close and react.

display: table;with table-layout: fixed;will create a fluid layout for children withdisplay: table-cell;

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

vertical-align: top; , middle bottom .

.

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

Hide result

Answer 2

, , min :

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

Hide result

reset , .

Answer 3

, , :

html:

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

css:

#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%;
}

. arent itemwrappers. , js : S.