images stretched in Chrome

Question

Hi,

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

Maybe this is because chrome has problems with "heigh" and width pased widh img.

Try to put css style on img directly:

img {
 width: 80%;
 width: 80%;
}

or even better put some class it.

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

Answer 3

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 4

If you resize the height of your chrome browser, and reload the page, the images will change height. (try it) Chrome is interpreting the 80% height to be 80% of the height of the window, not of the natural size of the image. I suggest resaving the images as the resolution you actually want them, and then eliminate all dimension attributes on them.