Google Chrome图片高度调整大小问题

Question

浏览器护目镜用于调整图像窗口高度的大小，以便进行严格缩放。红色和绿色是相同的高度，你改变窗口大小，红色低于绿色。 Probllem只出现在谷歌浏览器中。

＆＃13;

＆＃13;

.strona {
  margin: 0 auto;
  width: 100%;
}

.main1,
.main2,
.main3 {
  display: table;
  border-collapse: collapse;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.cell {
  display: table-cell;
  vertical-align: top;
}

.cell img {
  display: block;
  width: 100%;
  height: auto;
}

＆＃13;

<div class="strona">
  <div class="main1">
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_01.png" />
    </div>
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_02.png" />
    </div>
  </div>
  <div class="main2">
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_03.png" />
    </div>
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_04.png" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

jsfiddle.net

Answer 1

虽然情况属于你的情况但你应该使用background-image而不是img。Why。但是如果你想使用img那么 您需要将min-height:100%添加到.cell img。

FIDDLE

这是代码。

.strona {
  margin: 0 auto;
  width: 100%;
}

.main1,
.main2,
.main3 {
  display: table;
  border-collapse: collapse;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

.cell {
  display: table-cell;
  vertical-align: top;
}

.cell img {
  display: block;
  min-width: 100%;
  min-height: 100%;
}

<div class="strona">
  <div class="main1">
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_01.png" />
    </div>
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_02.png" />
    </div>
  </div>
  <div class="main2">
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_03.png" />
    </div>
    <div class="cell">
      <img src="http://www.glosler.com/test/chrome/img_04.png" />
    </div>
  </div>
</div>