如何使用弹性框在“列”中放置2行图像

Question

我正在使用弹性框建立一个网站。我有一个内部为2'列'的div，以及第二个'列'内部的2'行'，我必须填充两个图像，问题是图像不适合'行'并超过它宽度。

我需要使用导航器大小拉伸或缩小图像，因此我不能将px用于它们的大小。

这就是我想要的：

这就是我得到的：

这是我的代码：

#offices {
  background: peachpuff;      
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.col {
  background: yellow;
  flex: 1;      
}
.row {
  background: red;
  line-height: 0;
  display: flex;
}
#officesImg img {
  flex: 1;
  width: 100%;
  height: 100%;
}

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

这是CODEPEN

PD：请避免浮动解决方案。

Answer 1

您可以将#officesImg设置为display:flex。并从height:100%中移除img导致Firefox上的纵横比问题。

＆＃13;

＆＃13;

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
}
#officesImg img {
  width: 100%;
  height: auto;
}

＆＃13;

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一个与您的线框相匹配的略微抛光的版本。

＆＃13;

＆＃13;

#offices {
  background: peachpuff;
  margin: 1em;
  display: flex;
}
.col {
  background: yellow;
  margin: 1em;
  flex: 1;
}
#officesImg {
  line-height: 0;
  display: flex;
  padding: .5em;
}
#officesImg img {
  width: calc(100% - 1em);
  height: auto;
  margin: .5em;
}

＆＃13;

<div id="offices">
  <div class="col">
  </div>
  <div class="col" id="officesImg">
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
    <div class="row">
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_01_zpsewjzabzm.jpg" />
      <img src="http://i183.photobucket.com/albums/x312/Tiefnuker/office_02_zpsdz0zixcd.jpg" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

最快的解决方案是将每个图像元素包装在div中。

换句话说：

<div><img ... ></div>

图像保持响应并保持纵横比。

在Chrome，Firefox和IE11中测试过。

Revised Codepen