两个图像并排和响应 [英] Two images side by side and responsive

问题描述

我试图把两个图像并排，使他们的反应。现在的问题是，第二个图像先包裹，然后对浏览器的大小做出反应。
我想让他们保持在同一行（水平），并自动改变他们的大小并在某一点包裹（这部分不是问题）....

Im 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 them to stay on the same line (level) and change their size automatically and wrap at a certain point (this part isn't the 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;
}

有人可以帮助吗？

推荐答案

感谢您的帮助，但我现在使用不同的解决方案，朋友建议：

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

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

图像不填充itemwrappers。我想我需要为此写一些js：S。

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

这篇关于两个图像并排和响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！