- Responsive Web Design — Images
- Using The width Property
- Example
- Using The max-width Property
- Example
- Add an Image to The Example Web Page
- Example
- Background Images
- Example
- Example
- Example
- Different Images for Different Devices
- Example
- Example
- The HTML Element
- Example
- Адаптивные изображения. Что использовать: img или picture?
- Тег img
- Тег picture
- Разница между img и picture
Responsive Web Design — Images
Resize the browser window to see how the image scales to fit the page.
Using The width Property
If the width property is set to a percentage and the height property is set to «auto», the image will be responsive and scale up and down:
Example
Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.
Using The max-width Property
If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:
Example
Add an Image to The Example Web Page
Example
Background Images
Background images can also respond to resizing and scaling.
Here we will show three different methods:
1. If the background-size property is set to «contain», the background image will scale, and try to fit the content area. However, the image will keep its aspect ratio (the proportional relationship between the image’s width and height):
Example
div <
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-repeat: no-repeat;
background-size: contain;
border: 1px solid red;
>
2. If the background-size property is set to «100% 100%», the background image will stretch to cover the entire content area:
Example
div <
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: 100% 100%;
border: 1px solid red;
>
3. If the background-size property is set to «cover», the background image will scale to cover the entire content area. Notice that the «cover» value keeps the aspect ratio, and some part of the background image may be clipped:
Example
div <
width: 100%;
height: 400px;
background-image: url(‘img_flowers.jpg’);
background-size: cover;
border: 1px solid red;
>
Different Images for Different Devices
A large image can be perfect on a big computer screen, but useless on a small device. Why load a large image when you have to scale it down anyway? To reduce the load, or for any other reasons, you can use media queries to display different images on different devices.
Here is one large image and one smaller image that will be displayed on different devices:
Example
/* For width smaller than 400px: */
body background-image: url(‘img_smallflower.jpg’);
>
/* For width 400px and larger: */
@media only screen and (min-width: 400px) body <
background-image: url(‘img_flowers.jpg’);
>
>
You can use the media query min-device-width , instead of min-width , which checks the device width, instead of the browser width. Then the image will not change when you resize the browser window:
Example
/* For devices smaller than 400px: */
body background-image: url(‘img_smallflower.jpg’);
>
/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) body <
background-image: url(‘img_flowers.jpg’);
>
>
The HTML Element
The HTML element gives web developers more flexibility in specifying image resources.
The most common use of the element will be for images used in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
The element works similar to the and elements. You set up different sources, and the first source that fits the preferences is the one being used:
Example
The srcset attribute is required, and defines the source of the image.
The media attribute is optional, and accepts the media queries you find in CSS @media rule.
You should also define an element for browsers that do not support the element.
Адаптивные изображения. Что использовать: img или picture?
Теги img и picture предназначены для загрузки изображений. Каждый из них позволяет задать набор правил, согласно которым браузер будет выбирать, какое из изображений загружать. Рассмотрим синтаксис и различия данных тегов. Для начала нужно задать следующий метатег:
Данный метатег указывает браузеру выполнять масштабирование размеров экрана устройства. Так, например, размеры экрана iPhone X составляют 375×812 css-пикселей.
Для тестирования будем использовать следующее изображение:
Тег img
Атрибут srcset предназначен для указания всех доступных размеров изображений и URL каждого из них. При этом, тег src указывать нужно. Его значение будет использовано, если все варианты из srcset не подойдут согласно указанным правилам.
Атрибут srcset содержит список из одной или нескольких строк, разделённых запятыми, указывающих набор источников изображения. Каждая строка состоит из:
Ширина всех доступных изображений указывается в пикселях. По историческим причинам для обозначения пикселей используется символ w . В данном примере атрибут srcset содержит три изображения, ширина которых 480, 960 и 1920 пикселей соответственно. Браузер выберет изображение в зависимости от ширины экрана устройтва и его плотности пикселей. Если ширина экрана не превышает 480 css-пикселей, то будет выбрано следующее изображение:
- bears-480×270.jpg , если коэфициент плотности пикселей равен 1.
- bears-960×540.jpg , если коэфициент плотности пикселей равен 2 (retina display).
- bears-1920×1080.jpg , если коэфициент плотности пикселей больше 2.
Аналогично, если ширина экрана больше 480 css-пикселей, но не превышает 960 css-пикселей, то:
- bears-960×540.jpg , если коэфициент плотности пикселей равен 1.
- bears-1920×1080.jpg , если коэфициент плотности пикселей больше или равен 2.
При этом браузер будет подразумевать, что изображение занимает всю ширину экрана. Для переопределения такого поведения предназначен атрибут sizes , который содержит список из одной или нескольких строк, разделённых запятыми, указывающих какую максимальную ширину может занимать изображение при определённом размере экрана. Каждая строка состоит из:
В данном примере браузер будет следовать следующим правилам при выборе источника изображения:
- Если ширина экрана устройства составляет не более 600 css-пикселей, то изображение на таком экране занимает максимум 480 css-пикселей в ширину.
- Если ширина экрана устройства составляет от 600 до 1200 css-пикселей, то изображение на таком экране занимает максимум 960 css-пикселей в ширину.
- В противном случае браузер будет подразумевать, что изображение может занимает всю ширину экрана.
Также нужно учитывать коэфициент плотности пикселей. Например, если ширина экрана устройства составляет 550 css-пикселей, то браузер выберет следующее изображение:
- bears-480×270.jpg , если коэфициент плотности пикселей равен 1. Так как ширина экрана устройства не превышает 600 css-пикселей, то изображение на таком экране занимает максимум 480 css-пикселей в ширину.
- bears-960×540.jpg , если коэфициент плотности пикселей равен 2.
- bears-1920×1080.jpg , если коэфициент плотности пикселей больше 2.
Атрибут sizes нужно указывать, если размеры изображения ограничены css стилями. Если атрибут sizes не указан, то по умолчанию он будет иметь значение 100vw (sizes=»100vw» ), то есть браузер будет подразумевать, что изображение может занимает всю ширину экрана.
Тег picture
Тег picture служит контейнером для одного или более тегов source и одного тега img . Тег source представляет собой источник изображения. Он содержит информацию о формате изображения и его размерах, а также правила, при соблюдении которых браузер должен выбрать этот источник. Если все источники не подходят, то будет выбран файл, указанный в атрибуте src тега img . Если сразу несколько источников подходят, то браузер выберет первый по порядку.
Тег source имеет атрибуты sizes и srcset . Они работают также, как и соотвествующие атрибуты у тега img . Рассмотрим на примере:
Данный пример работает так же, как и второй пример использования тега img .
Разница между img и picture
Тег picture позволяет указать браузеру использовать разные изображения в зависимости от размера экрана. Достигается это за счёт использования атрибута media тега source , который позволяет задать медиа выражение, при котором будет использоваться данный источник. Например, на маленьких экранах мы хотим использовать обрезанное изображение cropped-bears.jpg , которое содержит основную часть изображения:
Для этого нужно указать несколько тегов source и задать им атрибуты media :
В данном примере, если ширина экрана устройства не превышает 480 css-пикселей, то будет выбрано обрезанное изображение. Добиться такого результата при помощи тега img не получиться, так как изображения cropped-bears-960×540.jpg и bears-960×540.jpg имеют одинаковый размер, но изображение cropped-bears-960×540.jpg предназначено для использования на устройстве, ширина которого не превышает 480 css-пикселей и коэфициент плотности пикселей равен 2, а изображение bears-960×540.jpg — на устройстве, ширина которого от 480 до 960 css-пикселей и коэфициент плотности пикселей равен 1.
Также, тег picture позволяет указать различные форматы изображения, например webp и jpeg . Для этого нужно тегу source задать атрибут type:
Источники с наименее поддерживаемыми типами нужно располагать в начале списка, так как браузер выберет первый по порядку подходящий источник. В данном примере браузер выберет тип изображения webp , если он его поддерживает. В противном случае будет выбран тип jpeg .