изображения растянуты в Chrome

Question

Два изображения в правом столбце веб-страницы были растянуты по вертикали примерно до 500% от их предполагаемого размера при просмотре в Google Chrome. В Firefox / IE они выглядят хорошо.

Соответствующая разметка HTML:

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

и 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;
}

Редактировать

Я исправил проблему и удалил ссылку на веб-страницу (в случае путаницы)

Answer 1

Не используйте оба.

Использовать только width="80%".

Не знаю деталей, почему он действует так, как он, но это решит вашу проблему (если только вы не намеренно хотите немного исказить изображение, используя вертикальное растяжение).

Answer 2

Это происходит с Webkit - кажется, что изображения отображаются такими, какие они есть, и не применяет автоматическое масштабирование, как это делают Firefox и IE. Вероятно, это выглядит так же и в Safari.

В соответствии со свойствами элемента в Firefox ваши изображения имеют следующие свойства:

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

Я думаю, что изменение высоты и ширины с 80% до фактических значений пикселей выше приведёт к исправлению в Webkit. И если это не сработает, вам, возможно, придется просто изменить размеры реальных изображений, чтобы они были 220px на 165px

Answer 3

Если вы измените высоту вашего браузера Chrome и перезагрузите страницу, изображения будут менять высоту. (попробуйте) Chrome интерпретирует 80% высоты как 80% высоты окна, а не естественный размер изображения. Я предлагаю сохранить изображения в том разрешении, которое вам действительно нужно, а затем удалить все атрибуты измерения на них.

Answer 4

Может быть, это связано с тем, что в chrome есть проблемы с высотой и шириной в единицах.

Попробуйте поставить стиль CSS непосредственно на img:

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

или, что еще лучше, поставьте какой-нибудь класс.