Chrome растягивает высоту моего изображения максимальной ширины

Question

У меня проблемы с настройкой максимальной ширины моих изображений в CMS, которую я использую.В Chrome (еще не протестирован в других браузерах) установка максимальной ширины увеличивает высоту вставляемого изображения - см. Здесь: http://www.literarykitchen.co.uk/events/testspace/

Это код, который я использую:

#content .pagebanner img { max-width:490px; }

Есть ли причина, по которой он так растягивается?Я думал, что maxwidth означает масштаб изображения пропорционально?

Спасибо

Осу

Answer 1

У меня была та же проблема, моя галерея изображений была динамичной, и все изображения были разных размеров, загруженных пользователем.Поэтому я должен был убедиться, что это сработало.Для меня это решило установить max-width:, max-height:, height: и width:, иначе это не помогло бы мне.

Пример:

#image-container-div img {
    max-width: 490px;
    max-height: 490px;
    height: auto;
    width: auto;
}

Answer 2

Для тех из вас, у кого есть эта проблема с использованием display: flex на родительском элементе, ваша проблема может заключаться в том, что вам нужно установить align-items на родительском элементе на значение, отличное от значения по умолчанию stretch, например align-items: flex-start.