Как адаптировать изображение к разрешению экрана html

Обновлено: 21.11.2024

Измените размер окна браузера, чтобы увидеть, как изображение масштабируется по размеру страницы.

Использование свойства ширины

Если для свойства ширины установлено значение в процентах, а для свойства высоты задано значение "авто", изображение будет адаптивным и масштабироваться вверх и вниз:

Пример

Обратите внимание, что в приведенном выше примере изображение можно увеличить, чтобы оно стало больше исходного размера. Во многих случаях лучшим решением будет использование свойства max-width.

Использование свойства max-width

Если для свойства max-width установлено значение 100 %, изображение будет уменьшаться, если это необходимо, но никогда не будет увеличиваться до размера, превышающего его исходный размер:

Пример

Добавить изображение на пример веб-страницы

Пример

Фоновые изображения

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

Здесь мы покажем три различных метода:

<р>1. Если для свойства background-size установлено значение «contain», фоновое изображение будет масштабироваться и пытаться уместиться в области содержимого. Однако изображение сохранит свое соотношение сторон (пропорциональное соотношение между шириной и высотой изображения):

Вот код CSS:

Пример

div <
ширина: 100%;
высота: 400 пикселей;
фоновое изображение: url('img_flowers.jpg');
фоновый повтор: без повтора;
размер фона: содержит;
граница: 1 пиксель сплошного красного цвета;
>

<р>2. Если свойство background-size установлено на «100% 100%», фоновое изображение будет растягиваться, чтобы покрыть всю область содержимого:

Вот код CSS:

Пример

div <
ширина: 100%;
высота: 400 пикселей;
фоновое изображение: url('img_flowers.jpg');
размер фона: 100% 100%;
граница: 1 пиксель сплошного красного цвета;
>

<р>3. Если для свойства background-size установлено значение «cover», фоновое изображение будет масштабироваться, чтобы покрыть всю область содержимого. Обратите внимание, что значение «обложка» сохраняет соотношение сторон, и некоторая часть фонового изображения может быть обрезана:

Вот код CSS:

Пример

div <
ширина: 100%;
высота: 400 пикселей;
фоновое изображение: url('img_flowers.jpg');
размер фона: обложка;
граница: 1 пиксель сплошного красного цвета;
>

Разные изображения для разных устройств

Большое изображение может идеально смотреться на большом экране компьютера, но бесполезно на маленьком устройстве. Зачем загружать большое изображение, если его все равно нужно уменьшить? Чтобы уменьшить нагрузку или по каким-либо другим причинам, вы можете использовать медиа-запросы для отображения разных изображений на разных устройствах.

Вот одно большое изображение и одно поменьше, которые будут отображаться на разных устройствах:

Пример

/* Для ширины менее 400 пикселей: */
фоновое изображение тела: url('img_smallflower.jpg');
>

/* Для ширины 400 пикселей и больше: */
@media только экран и (минимальная ширина: 400 пикселей) тело <
background-image: url('img_flowers.jpg');
>
>

Можно использовать медиазапрос min-device-width вместо min-width , который проверяет ширину устройства, а не ширину браузера. Тогда изображение не изменится при изменении размера окна браузера:

Пример

/* Для устройств размером менее 400 пикселей: */
фоновое изображение тела: url('img_smallflower.jpg');
>

/* Для устройств 400px и больше: */
@media только экран и (min-device-width: 400px) тело <
background-image: url('img_flowers.jpg');
>
>

HTML

Элемент предоставляет веб-разработчикам больше гибкости при указании графических ресурсов.

Наиболее распространенное использование

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

Пример

Атрибут srcset является обязательным и определяет источник изображения.

Атрибут media является необязательным и принимает мультимедийные запросы, указанные в правиле CSS @media.

В этой статье мы узнаем о концепции адаптивных изображений — изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешениями и другими подобными функциями, — и посмотрим, какие инструменты HTML предоставляет для их реализации. Это помогает повысить производительность на разных устройствах. Адаптивные изображения – это лишь часть адаптивного дизайна. Вам предстоит изучить будущую тему CSS.

Почему адаптивные изображения?

Давайте рассмотрим типичный сценарий.Типичный веб-сайт может содержать изображение заголовка и некоторые изображения содержимого под заголовком. Изображение заголовка, скорее всего, будет охватывать всю ширину заголовка, а изображение содержимого будет располагаться где-то внутри столбца содержимого. Вот простой пример:

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

Максимальная ширина основной части содержимого составляет 1200 пикселей. В окнах просмотра, превышающих эту ширину, основная часть остается равной 1200 пикселям и центрируется в доступном пространстве. В окнах просмотра, ширина которых меньше этой ширины, размер тела останется равным 100 % ширины окна просмотра.
Изображение заголовка настроено таким образом, что его центр всегда остается в центре заголовка, независимо от ширины заголовка. Если сайт просматривается на более узком экране, важная деталь в центре изображения (люди) все еще видна, а лишнее теряется по обеим сторонам. Его высота составляет 200 пикселей.
Изображения контента настроены таким образом, что если элемент body становится меньше изображения, изображения начинают уменьшаться, чтобы всегда оставаться внутри body, а не переполнять его.

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

Улучшением будет отображение обрезанной версии изображения, которая отображает важные детали изображения при просмотре сайта на узком экране. Второе обрезанное изображение может отображаться на устройстве с экраном средней ширины, например на планшете. Общая проблема, связанная с тем, что вы хотите показывать разные обрезанные изображения таким образом для разных макетов, широко известна как проблема художественного направления.

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

И наоборот, нет необходимости отображать большое изображение на экране, значительно меньшем, чем тот, для которого оно предназначено. Это может привести к потере пропускной способности; в частности, мобильные пользователи не хотят тратить пропускную способность на загрузку большого изображения, предназначенного для пользователей настольных компьютеров, когда для их устройства подойдет маленькое изображение. В идеале веб-браузеру пользователя должно быть доступно несколько разрешений. Затем браузер может определить оптимальное разрешение для загрузки в зависимости от размера экрана устройства пользователя.

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

Вы можете подумать, что векторные изображения решат эти проблемы, и в какой-то степени это так: они имеют небольшой размер файла и хорошо масштабируются, поэтому их следует использовать везде, где это возможно. Однако они подходят не для всех типов изображений. Векторные изображения отлично подходят для простой графики, шаблонов, элементов интерфейса и т. д., но создание векторного изображения с такими деталями, как, скажем, фотография, становится очень сложным. Форматы растровых изображений, такие как JPEG, больше подходят для изображений, которые мы видим в приведенном выше примере.

Такого рода проблемы не существовало, когда Интернет только появился, в начале-середине 90-х – тогда единственными устройствами для работы в Интернете были настольные компьютеры и ноутбуки, поэтому разработчики браузеров и составители спецификаций даже не думаю, чтобы реализовать решения. Технологии адаптивных изображений были реализованы недавно для решения указанных выше проблем, позволяя вам предлагать браузеру несколько файлов изображений, либо отображающих одно и то же, но содержащих разное количество пикселей (переключение разрешения) или разные изображения, подходящие для разного распределения пространства (художественное оформление).

Примечание. Новые возможности, обсуждаемые в этой статье — srcset/sizes/

— все они поддерживаются современными настольными и мобильными браузерами (включая браузер Microsoft Edge, но не Internet Explorer).

Как вы создаете адаптивные изображения?

В этом разделе мы рассмотрим две проблемы, показанные выше, и покажем, как их решить с помощью функций адаптивного изображения HTML. Обратите внимание, что мы сосредоточимся на элементах для этого раздела, как видно из области содержимого в приведенном выше примере — изображение в заголовке сайта предназначено только для украшения и, следовательно, реализовано с использованием фоновых изображений CSS. У CSS, возможно, есть лучшие инструменты для адаптивного дизайна, чем у HTML, и мы поговорим о них в следующем модуле CSS.

Переключение разрешения: разные размеры

Итак, какую проблему мы хотим решить с помощью переключения разрешения? Мы хотим отображать идентичный контент изображения, только большего или меньшего размера в зависимости от устройства — это ситуация, которая у нас есть со вторым изображением контента в нашем примере. Стандартный элемент традиционно позволяет указать браузеру только один исходный файл:

Однако мы можем использовать два новых атрибута — srcset и размеры — для предоставления нескольких дополнительных исходных изображений вместе с подсказками, которые помогут браузеру выбрать правильное. Вы можете увидеть пример этого в нашем примере responsive.html на Github (см. также исходный код):

Атрибуты srcset и размеры кажутся сложными, но их несложно понять, если отформатировать их, как показано выше, с разными частями значения атрибута в каждой строке. Каждое значение содержит список, разделенный запятыми, и каждая часть этих списков состоит из трех частей. Теперь давайте пробежимся по содержимому каждого из них:

srcset определяет набор изображений, из которых браузер может выбирать, и размер каждого изображения. Каждый набор информации об изображении отделяется от предыдущего запятой. Для каждого мы пишем:

Имя файла изображения ( elva-fairy-480w.jpg )
Пробел
Внутренняя ширина изображения в пикселях ( 480w ). Обратите внимание, что здесь используется единица w, а не px, как можно было бы ожидать. Внутренний размер изображения — это его реальный размер, который можно узнать, просмотрев файл изображения на вашем компьютере (например, на Mac вы можете выбрать изображение в Finder и нажать Cmd + I, чтобы открыть информационный экран).

Размер

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

Условие мультимедиа ( (max-width:600px) ) — вы узнаете больше об этом в разделе CSS, а сейчас давайте просто скажем, что условие мультимедиа описывает возможное состояние, в котором может находиться экран. в этом случае мы говорим "когда ширина области просмотра составляет 600 пикселей или меньше".
Пробел
Ширина слота, который заполнит изображение, если условие мультимедиа истинно (480 пикселей)

Примечание. Для ширины рекламного места вместо абсолютной ширины (например, 480 пикселей) можно указать ширину относительно области просмотра (например, 50vw ), но не в процентах. Возможно, вы заметили, что ширина последнего слота не имеет условия носителя (это значение по умолчанию, которое выбирается, когда ни одно из условий носителя не выполняется). Браузер игнорирует все после первого условия совпадения, поэтому будьте осторожны с порядком условий мультимедиа.

Итак, при наличии этих атрибутов браузер будет:

Посмотрите на ширину устройства.
Выясните, какое условие мультимедиа в списке размеров является первым, чтобы быть верным.
Посмотрите на размер слота, указанный для этого медиа-запроса.
Загрузить изображение, указанное в списке srcset, которое имеет тот же размер, что и слот, или, если его нет, первое изображение, размер которого превышает выбранный размер слота.

И все! На этом этапе, если поддерживаемый браузер с шириной области просмотра 480 пикселей загружает страницу, условие мультимедиа (max-width: 600px) будет истинным, и поэтому браузер выбирает слот 480 пикселей. elva-fairy-480w.jpg будет загружен, так как его внутренняя ширина (480w) ближе всего к размеру слота. Изображение размером 800 пикселей занимает на диске 128 КБ, а версия с разрешением 480 пикселей — всего 63 КБ, что позволяет сэкономить 65 КБ. А теперь представьте, если бы это была страница, на которой было бы много картинок. Использование этого метода может сэкономить мобильным пользователям много трафика.

Примечание. При тестировании с браузером настольного компьютера, если браузер не может загрузить более узкие изображения, когда у вас установлена самая узкая ширина окна, посмотрите, какое окно просмотра (вы можете приблизить его, выбрав в консоль JavaScript браузера и введите document.querySelector('html').clientWidth ). У разных браузеров есть минимальные размеры, до которых они позволяют уменьшить ширину окна, и они могут быть шире, чем вы думаете.При тестировании в мобильном браузере вы можете использовать такие инструменты, как страница Firefox about:debugging, чтобы проверить страницу, загруженную на мобильный телефон, с помощью инструментов разработчика для настольных компьютеров.

Чтобы увидеть, какие изображения были загружены, вы можете использовать вкладку Network Monitor в Firefox DevTools.

Старые версии браузеров, не поддерживающие эти функции, просто их игнорируют. Вместо этого эти браузеры загрузят изображение, указанное в атрибуте src, как обычно.

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

Переключение разрешения: одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же реальном размере на экране, вы можете разрешить браузеру выбирать изображение с подходящим разрешением, используя srcset с x-дескрипторами и без размеров — несколько более простой синтаксис! Вы можете найти пример того, как это выглядит в srcset-resolutions.html (см. также исходный код):

В этом примере к изображению применяется следующий CSS, чтобы его ширина на экране составляла 320 пикселей (также называемых пикселями CSS):

В этом случае размеры не нужны — браузер определяет, какое разрешение имеет дисплей, на котором он отображается, и показывает наиболее подходящее изображение, указанное в srcset . Таким образом, если устройство, обращающееся к странице, имеет дисплей со стандартным/низким разрешением, где один пиксель устройства представляет каждый пиксель CSS, будет загружено изображение elva-fairy-320w.jpg (подразумевается 1x, поэтому вам не нужно включать это.) Если устройство имеет высокое разрешение, составляющее два пикселя устройства на пиксель CSS или более, будет загружено изображение elva-fairy-640w.jpg. Размер изображения 640 пикселей составляет 93 КБ, а размер изображения 320 пикселей – всего 39 КБ.

Художественное оформление

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

Элемент позволяет реализовать именно такое решение.

Возвращаясь к нашему исходному примеру not-responsive.html, у нас есть изображение, которое очень нуждается в художественном оформлении:

Давайте это исправим с помощью

элемент представляет собой оболочку, содержащую несколько элементов, предоставляющих различные источники для выбора браузером, за которыми следует наиболее важный элемент. Код в responsive.html выглядит так:

Элементы включают атрибут media, который содержит условие мультимедиа. Как и в первом примере srcset, эти условия являются тестами, которые определяют, какое изображение будет показано. Будет отображено первое изображение, которое возвращает значение true. В этом случае, если ширина области просмотра составляет 799 пикселей или меньше, будет отображаться изображение первого элемента. Если ширина области просмотра составляет 800 пикселей или больше, она будет второй.
Атрибуты srcset содержат путь к отображаемому изображению. Как мы видели выше, может принимать атрибут srcset с несколькими ссылками на изображения, а также атрибут размеров. Таким образом, вы можете предложить несколько изображений с помощью

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

Этот код позволяет отображать подходящее изображение как на широкоэкранных, так и на узких экранах, как показано ниже:

Примечание. Атрибут медиа следует использовать только в сценариях художественного оформления; когда вы используете media , не предлагайте условия мультимедиа в атрибуте Sizes.

Почему мы не можем сделать это с помощью CSS или JavaScript?

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

Смело используйте современные форматы изображений

Новые форматы изображений, такие как WebP и AVIF, могут одновременно поддерживать небольшой размер файла и высокое качество. Эти форматы теперь имеют относительно широкую поддержку браузеров, но имеют небольшую «историческую глубину».

позволяет нам продолжать работать со старыми браузерами. Вы можете указать типы MIME внутри атрибутов типа, чтобы браузер мог немедленно отклонить неподдерживаемые типы файлов:

Не не используйте медиа-атрибут, если только вам не требуется художественное оформление.
В элементе можно ссылаться только на изображения типа, объявленного в type .
При необходимости используйте списки, разделенные запятыми, с srcset и size .

Активное обучение: создание собственных адаптивных изображений

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

и пример переключения разрешения с использованием srcset .

Напишите простой HTML-код, который будет содержать ваш код (используйте not-responsive.html в качестве отправной точки, если хотите).
Найдите красивое широкоэкранное пейзажное изображение с какой-либо деталью, содержащейся где-нибудь. Создайте его веб-версию с помощью графического редактора, затем обрежьте его, чтобы показать меньшую часть, которая увеличивает детали, и создайте второе изображение (для этого подойдет ширина около 480 пикселей).
Используйте

Проверьте свои навыки!

Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти подробную оценку, которая проверяет эти навыки в конце модуля; см. заставку Mozilla.

Обзор

Художественное направление: проблема, из-за которой вы хотите использовать обрезанные изображения для разных макетов — например, альбомное изображение, показывающее полную сцену для макета для настольного компьютера, и портретное изображение, показывающее увеличенный основной объект для мобильного макета. Вы можете решить эту проблему с помощью

Это также закрывает весь модуль мультимедиа и встраивания! Единственное, что нужно сделать сейчас, прежде чем двигаться дальше, — это попробовать нашу мультимедийную оценку и посмотреть, как вы продвигаетесь. Удачи!

TL;DR. Под адаптивными изображениями понимаются изображения, которые должным образом адаптируются к различным размерам экрана, разрешениям, положениям и другим факторам. Поскольку большинство веб-сайтов являются адаптивными, вам следует избегать добавления статических изображений на страницы.

Содержание

Добавление адаптивных изображений с помощью CSS

Адаптивный веб-дизайн изменяет размер или ориентацию окна без потери качества содержимого. Изображения масштабируются после установки определенных свойств ширины CSS.

Существует три основных метода оформления фоновых изображений CSS. Вы можете использовать разные файлы изображений в зависимости от размера области просмотра устройств.

Указание ширины для масштабирования

Размеры изображений CSS изменяются в зависимости от размеров окна браузера. Вам необходимо установить свойства width или max-width, чтобы CSS реагировал на такие изменения.

Вы можете включить уменьшение и увеличение масштаба, установив ширину на 100%.

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

Чтобы адаптивные изображения не превышали исходные размеры изображений CSS, используйте max-width и установите для него значение 100%.

Установка размера фона по размеру экрана

С помощью CSS вы можете установить свойство background-size для изображения, чтобы оно соответствовало размеру экрана (области просмотра).

Свойство background-size имеет значение cover . Он указывает браузерам автоматически масштабировать ширину и высоту адаптивного фонового изображения, чтобы они были такими же или больше, чем область просмотра.

В этом примере кода размер фонового изображения CSS подгоняется под размер экрана:

Адаптивное фоновое изображение заполняет всю страницу, не оставляя пробелов.
Изображение находится в центре, масштабируется при необходимости и не требует полосы прокрутки.

Подробнее о фоновом изображении

Сохранение соотношения сторон

Выберите этот метод, если у вас небольшое изображение и вы хотите сохранить его качество.

Установите свойство background-size для содержимого. Он сообщает браузеру, что фоновое изображение масштабируется, пытаясь соответствовать области содержимого, но не теряет соотношение сторон и не становится размытым.

Иногда изображения слишком велики для отображения на веб-странице. Нам не нужен JavaScript, чтобы исправить это. Мы можем пропорционально изменять размеры изображений с помощью тегов изображений HTML или стилей фона CSS. Давайте рассмотрим различные варианты изменения размера изображений, сохраняя при этом их соотношение сторон.

Изменение размера HTML-тегов изображений

Наш первый вариант – установить только одно свойство размера, будь то ширина или высота. Браузер автоматически рассчитает размер другого края.

Представьте, что у нас есть изображение кота с соотношением сторон 4:3 , другими словами, его размеры 4032 × 3024 , это много кота.

Если мы хотим, чтобы он отображался немного меньше, мы можем установить ширину 240 , тогда браузер автоматически рассчитает высоту равной 180 .

Есть одно предостережение. Изображения доступны не сразу.

Браузер отобразит страницу, дождется загрузки источника изображения, а затем обновит высоту элемента изображения. Это, скорее всего, приведет к тому, что браузер отобразит страницу дважды, потому что после обновления высоты изображения все элементы под изображением смещаются вниз.

Это плохая новость для эффективности вашей страницы.

Лучше всего установить предполагаемый размер, чтобы браузер мог зарезервировать место.

Но что, если мы не знаем соотношение сторон изображения и получаем квадратное изображение кота? Наш кот не раздавится? Да, да, бедный кот.

Но не бойтесь, мы можем исправить это с помощью CSS.

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

Что делать, если наше изображение нужно ограничить шириной родительского элемента? В этой ситуации мы можем использовать максимальную ширину или ширину CSS, чтобы соответствовать изображению.

Используйте max-width: 100%, чтобы ограничить размер, но разрешите изображения меньшего размера. Используйте width: 100%, чтобы всегда масштабировать изображение в соответствии с шириной родительского контейнера.

Мы также можем использовать CSS, чтобы исправить соотношение сторон изображения, узнайте больше о представлении изображений с определенным соотношением сторон.

Изменение размера фоновых изображений CSS

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

Это можно исправить, установив свойство background-size. Чтобы поместить изображение внутри элемента, мы используем значение содержимого. Браузер подгонит изображение к границам элемента и пропорционально масштабирует его.

Подобно объектному подходу, мы также можем использовать значение покрытия, чтобы сообщить браузеру, что элемент должен быть покрыт пикселями-кошками. Как вы можете видеть ниже, это приведет к уменьшению масштаба ровно настолько, чтобы соответствовать вертикальному пространству, теперь обрезана только правая сторона нашего кота.

Мы также можем указать значение ширины в единственном числе для свойства background-size. Как и в случае с элементом img, высота будет рассчитана автоматически.

Я делюсь советами по веб-разработке в Твиттере. Если вам это интересно и вы хотите узнать больше, подписывайтесь на меня там

Читайте также: