HTML – 两个图像并排和响应

我试图并排放置两个图像,使它们响应.现在的问题是,第二个图像首先包装,然后对浏览器的大小做出反应.
我希望它们保持在同一条线(水平)并自动改变它们的大小并在某一点包裹(这部分不是问题)….

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

有人可以帮忙吗？

解决方法

使用显示表并排放置并保持并排并响应.

显示：表;表格布局：固定;将使用display：table-cell为子元素创建流畅的布局;

这不仅可以使它们保持相同的宽度,还可以使容器保持相同的高度.

vertical-align：top;将它们与顶部对齐,或者您可以将垂直位置更改为中间和底部以及其他一些.

任何问题都会消失.

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