htmlcssgoogle-chrome

images stretched in Chrome

The two images in the right-hand column of a webpage have been vertically stretched to about 500% of their intended size when viewed in Google Chrome. In Firefox/IE they look fine.

The relevant HTML markup is

<div class="right_column">                                      
  <div class="photo">
    <img height="80%" width="80%" alt="chalet" src="photos/slides/DSCF0024.JPG"/>
  </div>                        
  <div class="photo">
    <img height="80%" width="80%" alt="bateaux" src="photos/slides/DSCF0418.JPG"/>
  </div>
</div>

and the CSS is:

.right_column {
  float:right;
  overflow:hidden;
  padding:0 5px 0 0;
  width:275px;
}

.photo img {
  border:1px solid #666666;
  margin-top:30px;
  padding:4px;
}

Edit

I've fixed the problem and have removed the link to the webpage (in case of confusion)

Solution

  • Do not use both.

    Use only width="80%".

    Don't know details why it acts like it does, but that will fix your problem (unless you intentionally want to distort your image a bit using vertical stretch).