Атрибут imagesizes устанавливает размеры предварительно загружаемого изображения. Значение imagesizes соответствует значению атрибута sizes элемента <img>.
Работает только для элемента <link>, у которого значение атрибута rel установлено как preload, а значение атрибута as установлено как image.
<link rel="preload" as="image">
Синтаксис
[ <размер исходника># , ]? <значение размера исходника>
<медиа-запрос> <значение размера исходника>
<размер>
<значение размера исходника> не допускает проценты, используйте только единицы vw.
Значение по умолчанию
Нет.
Пример
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>imagesizes</title>
<link rel="preload" as="image"
href="image/mushroom.jpg"
imagesrcset="image/mushroom.jpg 600w, image/mushroom_retina.jpg 1200w"
imagesizes="100vw">
<style>
body {
margin: 0; /* Убираем поля */
}
img {
max-width: 100%; /* Максимальная ширина изображений */
}
</style>
</head>
<body>
<img src="image/mushroom.jpg" alt="Сыроежка"
srcset="image/mushroom.jpg 600w, image/mushroom_retina.jpg 1200w"
sizes="100vw">
</body>
</html>
Браузеры
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.