Chrome Stretched Images

Question

The two images in the right column of the webpage were vertically stretched to approximately 500% of their estimated size when viewed in Google Chrome. In Firefox / IE, they look great.

Matching HTML markup

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

.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 fixed the problem and removed the link to the webpage (in case of confusion)

Answer 1

Do not use both options.

Use only width="80%".

I don’t know the details of why it acts as if it is happening, but it will fix your problem (if you do not intend to distort the image a bit with vertical stretching).

Answer 2

Webkit - , , , , , Firefox IE. , Safari.

Firefox :

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

, 80% Webkit. , 220 165

Answer 3

, , "heigh" width pased widh img.

css img:

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

.

Answer 4

If you resize your chrome browser and reload the page, the images will resize. (try it) Chrome interprets a height of 80% to 80% of the height of the window, not the actual size of the image. I suggest saving the images as the resolution that you really want, and then eliminating all dimension attributes.