Question

我试图将两张图片并排放置，让它们反应灵敏。现在的问题是，第二个图像首先包装，然后对浏览器的大小做出反应。我希望它们保持在相同的线（水平）并自动改变它们的大小并在某一点包裹（这部分不是问题）....

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

有人可以帮忙吗？

Answer 1

使用显示表将它并排放置并保持并排并响应。

带有display: table;的

table-layout: fixed;将为display: table-cell;

的子元素创建流畅的布局

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

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>

Answer 2

如果图像大小相同或比例相同，则可以使用flex，width和min-width设置断点：

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

删除或重置您需要使用 demo 评论的规则。

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

这引起了另一个问题。图像不是填充物品包装器。我想我需要写一些js：S。

两个图像并排和响应

3 个答案: