images stretched in Chrome

Question

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)

Answer 1

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

Answer 2

This happens with Webkit - it seems to display the images as they are, and doesn't apply automatic scaling like Firefox and IE do. It probably looks like that in Safari as well.

According to the element properties on Firefox, your images have these properties:

520px × 390px (scaled to 220px × 165px)

I think that changing the height and width from 80% to the actual pixel values above will fix it in Webkit. And if that doesn't work, you may have to just resize the actual images to be 220px by 165px