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

Question

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

эффект я хочу достичь можно увидеть на ВИЦЕ новостей (http://news.vice.com)

Как вы можете видеть, при изменении размера браузера, соотношение сторон изображения остается неизменным на протяжении определенного размера. Он прыгает на 1200 пикселей и снова на 700 пикселей, при этом масштабируя ширину и высоту.

Есть ли способ достичь этого, используя только CSS? Моя голова застряла на этом.

Спасибо!

Answer 1

Вопросы СМИ, конечно.

Если вы посмотрите в своем исходном коде, вы увидите, что у них есть 3 разные версии одного и того же изображения для отображения на каждом разном размере (чтобы минимизировать масштабирование). Затем, с помощью медиа запросов, они будут отображать правильную один и есть его ширина заполнения страницы:

Вот мобильный образ, например:

@media only screen and (min-width: 43.75em) 
{ 
    .lede .lede-images img.mobile 
    { 
     display: none; 
    } 
} 

А вот глобальный код:

.lede .lede-images img.mobile 
{ 
    width: 100%; 
} 

Установка ширины до 100% при отсутствии высоты будет автоматически поддерживать соотношение сторон при изменении размера.