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

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

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

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

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

Спасибо

Осу


image-scaling css
person Osu    schedule 20.03.2012    source источник
comment
Путем проб и ошибок нашел ответ - вам нужно установить высоту на «авто»: #content .pagebanner img { max-width:490px; height:auto; }   -  person Osu    schedule 20.03.2012
comment
Это решение не работает для меня в Chrome. :(   -  person mcandre    schedule 07.09.2012
comment
@mcandre Одд; это для меня. Хром 22.0.1..и т.д....   -  person nchpmn    schedule 03.10.2012

Ответы (2)


arrow_upward
12
arrow_downward

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

Пример:

#image-container-div img {
    max-width: 490px;
    max-height: 490px;
    height: auto;
    width: auto;
}
person iRebel_85    schedule 20.02.2013
comment
Спасибо за этот ответ, так как он помог в нескольких местах. Готовя наш сайт Mobilegeddon, я обнаружил, что настройка ширины выше на 100% дает мне лучшее из всех решений: #image-container-div img { max-width: 490px; max-height: 490px; height: auto; width: 100%; } - person Mike A; 05.05.2015

arrow_upward
1
arrow_downward

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

person UsAndRufus    schedule 29.04.2019