CODEWITHSUNDEEP
htmlcss
pasza
pasza

Reputation: 67

Google chrome image height resize issue

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

enter image description here

Upvotes: 1

Views: 1689

Answers (1)

shubham agrawal
shubham agrawal

Reputation: 3541

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>

Upvotes: 1

Related Questions