images stretched in Chrome

css, google-chrome, html

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

Problem

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)

Original source