Адаптивный сайт изображения выдает

Question

Если вы посмотрите на сайте: http://cornerstonecastings.com

Это одна из моих первых реагирующих сайтов, и он построен с Wordpress. Проблема, с которой я сталкиваюсь, связана с отзывчивостью изображений на сайте. Если вы измените размер своего браузера (я использую последний Chrome), изображения будут корректироваться и уменьшаться соответственно, как и предполагалось. Но при просмотре сайта с iPhone Safari (или Chrome iOS, если на то пошло) изображения регулируются горизонтально, но они растягиваются и искажаются по вертикали. Почему это?

Edit:

Я просмотрел сайт в последней Safari на моем рабочем столе, и то же самое происходит растяжение по вертикали, говорит мне, что это не мобильный Safari конкретным. Почему изображения хорошо работают в Chrome, но не в Safari?

Answer 1

Это height: 100%, из-за чего это происходит. Для пропорционального масштабирования изображений требуется height значение auto.

Селектор находится вокруг строки 468 в вашем стиле.css. Изменение height:

div.main-content img { 
    height: auto; /* add !important if height is set inline on the image */ 
} 

А почему это происходит в Safari, но не в Chrome; Я не знаю точно, но я заметил, что Chrome часто принимает ошибки в CSS и преобразует их, чтобы выглядеть корректно. Я предполагаю, что это хорошая функция для обычного использования, но мне не нравится развиваться в Chrome, так как я могу пропустить небольшую ошибку, которая нарушает макет в других браузерах.