Google chrome image height resize issue

Question

Browser goggles chrome for resizing the window height of the images badly scales. Red and green are the same height, you change the window size, red is lower than green. Probllem only occurs in google chrome.

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

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

jsfiddle.net

Tried the fiddle, works fine for me when I resize the result window — Carl Binalla, Mar 02 '17 at 09:39
If you're gonna use `display: table`, it would be better if you use `` instead, unless you have specific reason for using `display:table` — Carl Binalla, Mar 02 '17 at 09:48

score 1 · Answer 1 · edited May 23 '17 at 11:46

Although in situation as yours you should use background-imagerather then img.Why.But if you want to use img then you need to add min-height:100% to .cell img.

FIDDLE

Here is the code.

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

Are you referring to width not decreasing.If that is the issue then change min-width:100% in img to width:100%; — shubham agrawal, Mar 02 '17 at 11:54

Google chrome image height resize issue

1 Answers1