Тег img используется для вставки изображений на веб-страницы. Тег picture служит контейнером для одного или более элементов source и одного элемента img для обеспечения оптимальной версии изображения для различных размеров экрана. Тег figure представляет собой средство вывода иллюстрации с необязательной подписью, иногда называемой заголовком.
Круглые, овальные изображения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Круглые изображения</title>
<style>
.round {
border-radius: 100px; /* Радиус округления */
box-shadow: 0 0 0 3px green, 0 0 13px #333; /* Параметры теней */
margin: 3px;
}
</style>
</head>
<body>
<p><img src="images/thumb1.jpg" alt="" class="round">
<img src="images/thumb2.jpg" alt="" class="round">
<img src="images/thumb3.jpg" alt="" class="round"></p>
</body>
</html>
Блок со округлёнными уголками с помощью CSS3
div { border-radius: 10px; } Радиус скругления для всех уголков сразу.
div { border-radius: 0 10px; } Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div { border-radius: 20px 10px 0; } Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 20px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Радиус</title>
<style>
div {
background: #007E3E; /* Цвет фона */
color: #fff; /* Цвет текста */
padding: 10px; /* Поля вокруг текста */
-moz-border-radius: 5px; /* Для Firefox 3 */
-webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
border-radius: 5px; /* Для современных браузеров */
}
</style>
</head>
<body>
<div>Меня — супплетивная форма винительного падежа от я.</div>
</body>
</html>
Блок с закруглениями
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Адрес</title>
<style type="text/css">
p.address, p.address span {
background: url(images/roundbg.png) no-repeat; /* Путь к изображению */
height: 36px; /* Высота блока */
width: 150px; /* Ширина блока */
text-align: center; /* Выравнивание по центру */
}
p.address span {
display: block; /* Блочный элемент */
background-position: 100% 0; /* Положение фона */
position: relative; /* Относительное позиционирование */
left: 17px; /* Сдвигаем вправо */
padding: 6px 0; /* Поля вокруг текста */
text-indent: -17px; /* Сдвигаем текст влево */
}
</style>
</head>
<body>
<p class="address"><span>ул. Могильщиков, 66</span></p>
</body>
</html>
Скругленные уголки у изображений
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скругленные уголки</title>
<style>
.roundcorner {
position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */
}
.roundcorner div {
position: absolute; /* Абсолютное позиционирование */
top: 0; left: 0; /* Нулевые координаты */
}
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div>
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
<div><img src="images/round.png" alt="" width="120" height="120"></div>
</div>
</body>
</html>
Наложение фонового изображения на другое изображение и имитация овальных углов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Скругленные уголки</title>
<style>
.roundcorner {
position: relative; /* Относительное позиционирование */
float: left; /* Выравнивание по левому краю с обтеканием */
margin-right: 20px; /* Отступ справа */
}
.roundcorner div {
background: url(images/round.png); /* Рисунок с уголками */
position: absolute; /* Абсолютное позиционирование */
left: 0; top: 0; /* Положение от левого верхнего угла */
width: 100%; height: 100%; /* Размеры совпадают с фотографией */
}
</style>
</head>
<body>
<div class="roundcorner">
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
<div></div>
</div>
<div class="roundcorner">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
<div></div>
</div>
</body>
</html>
Изменение цвета рамки изображения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Цвет рамки</title>
<style>
a img {
border: 3px solid #53da3f; /* Рамка вокруг изображения-ссылки */
}
a:hover img {
border: 3px solid #f26522; /* Рамка при наведении на ссылку курсора мыши */
}
</style>
</head>
<body>
<p>
<a href="vinnie-the-pooh.html">
<img src="images/figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
<a href="vinnie-the-pooh.html">
<img src="images/figure.jpg" alt="Винни-Пух" width="100" height="111"></a>
</p>
</body>
</html>
или
img {
border: 3px solid #53da3f; /* Рамка вокруг изображения */
}
img:hover {
border: 3px solid #f26522; /* Рамка при наведении на рисунок курсора мыши */
}
Большая, усиленная рамка вокруг изображения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Паспарту</title>
<style>
.passe-partout {
padding: 30px; /* Ширина паспарту */
background: #f0f0f0; /* Цвет фона паспарту */
border: 2px solid #666; /* Параметры рамки */
}
</style>
</head>
<body>
<p><img src="images/mufta.jpg" alt="Девочка с муфтой" class="passe-partout"></p>
</body>
</html>
или, вокруг figure браузеры Chrome и Firefox добавляют автоматические отступы по 40 пикселов
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Паспарту</title>
<style>
.passe-partout {
padding: 40px; /* Размер паспарту */
background: #f0f0f0; /* Цвет фона паспарту */
border: 2px solid #800000; /* Параметры рамки */
display: inline-block; /* Строчно-блочный элемент */
margin: 0; /* Убираем отступы */
}
.passe-partout img {
border: 2px solid #666; /* Рамка вокруг изображения */
}
</style>
<!--[if lt IE 9]>
<script>document.createElement('figure');</script>
<![endif]-->
</head>
<body>
<figure class="passe-partout">
<img src="images/siberia.jpg" width="200" height="231" alt="Полярник">
</figure>
</body>
</html>
Убрать рамку вокруг изображений-ссылок
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рисунок без рамки</title>
<style>
a img {
border: none; /* Убираем рамку */
}
</style>
</head>
<body>
<p><a href="link.html">
<img src="images/sample.gif" width="100" height="100" alt="Рисунок без рамки">
</a></p>
</body>
</html>
Изменение вида всплывающей подсказки изображения
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Всплывающая подсказка</title>
<style>
#floatTip {
position: absolute; width: 250px; display: none;
border: 1px solid #000; padding: 4px;
font-family: sans-serif; font-size: 9pt;
color: #333; background: #ffe5ff;
}
</style>
<script src="scripts/tooltip.js"></script>
</head>
<body>
<p><img src="images/odel.jpg" alt="Фотография"
onMouseOver="toolTip('Фотоаппарат: Canon EOS 350D<br>Объектив: Canon EF 24-105 f/4L IS USM<br>Вспышка: Canon Speedlite 580 EX<br>Выдержка: 1/125<br>Диафрагма: 5.6')"
onMouseOut="toolTip()"></p>
<div id="floatTip"></div>
</body>
</html>
Скрипт
document.onmousemove = moveTip;
function moveTip(e) {
floatTipStyle = document.getElementById("floatTip").style;
w = 250; // Ширина подсказки
// Для браузера IE6-8
if (document.all) {
x = event.clientX + document.body.scrollLeft;
y = event.clientY + document.body.scrollTop;
// Для остальных браузеров
} else {
x = e.pageX; // Координата X курсора
y = e.pageY; // Координата Y курсора
}
// Показывать слой справа от курсора
if ((x + w + 10) < document.body.clientWidth) {
floatTipStyle.left = x + 'px';
// Показывать слой слева от курсора
} else {
floatTipStyle.left = x - w + 'px';
}
// Положение от верхнего края окна браузера
floatTipStyle.top = y + 20 + 'px';
}
function toolTip(msg) {
floatTipStyle = document.getElementById("floatTip").style;
if (msg) {
// Выводим текст подсказки
document.getElementById("floatTip").innerHTML = msg;
// Показываем подсказку
floatTipStyle.display = "block";
} else {
// Прячем подсказку
floatTipStyle.display = "none";
}
}
Изображение на всю ширину окна браузера
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Ширина 100%</title> </head> <body> <p><img src="images/figure.jpg" alt="Винни-Пух" width="100%"></p> </body> </html>
Изображение по центру страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Выравнивание фотографии по центру</title>
<style>
.fig {
text-align: center; /* Выравнивание по центру */
}
</style>
</head>
<body>
<p>Текст до изображения</p>
<p class="fig"><img src="images/photo1.jpg"
width="320" height="181" alt="Фотография"></p>
<p>Текст после изображения</p>
</body>
</html>
Изображение по центру страницы с подписью, для блока с фотографией используется тег figure, а для подписи к нему тег figcaption
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотография с подписью</title>
<style>
.fig {
display: block; /* Блочный элемент (для старых браузеров) */
text-align: center; /* Выравнивание по центру */
font-style: italic; /* Курсивное начертание */
margin-top: 0; /* Отступ сверху */
margin-bottom: 5px; /* Отступ снизу */
color: #666; /* Цвет подрисуночной подписи */
}
</style>
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
</head>
<body>
<figure class="fig">
<img src="images/photo2.jpg" width="320" height="179"
alt="Барельеф">
<figcaption>
Пещерный человек добывает огонь.
Но что это за лунная поверхность на заднем плане? Нет, не так все просто.
</figcaption>
</figure>
</body>
</html>
Обтекание изображения текстом
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Обтекание</title>
<style>
.leftimg {
float:left; /* Выравнивание по левому краю */
margin: 7px 7px 7px 0; /* Отступы вокруг картинки */
}
.rightimg {
float: right; /* Выравнивание по правому краю */
margin: 7px 0 7px 7px; /* Отступы вокруг картинки */
}
</style>
</head>
<body>
<h2>Доклад лейтенанта Бокатуева</h2>
<p><img src="images/1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg">
Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного
противника в камуфляжной форме Алиенов.</p>
<h2>Пресс-релиз аналитической группы</h2>
<p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg">
В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось
психотропное оружие.</p>
</body>
</html>
Подпись под изображением с рамкой, с обтеканием текста
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Подрисуночная подпись</title>
<style>
.sign {
float: right; /* Выравнивание по правому краю */
border: 1px solid #333; /* Параметры рамки */
padding: 7px; /* Поля внутри блока */
margin: 10px 0 5px 5px; /* Отступы вокруг */
background: #f0f0f0; /* Цвет фона */
}
.sign figcaption {
margin: 0 auto 5px; /* Отступы вокруг абзаца */
}
</style>
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('figcaption');</script>
<![endif]-->
</head>
<body>
<figure class="sign">
<p><img src="images/helen.jpg" width="150" height="212" alt="Скульптура"></p>
<figcaption>Деревянная скульптура</figcaption>
</figure>
<p>Точность крена эллиптично позволяет пренебречь колебаниями корпуса, хотя этого
в любом случае требует нестационарный успокоитель качки, исходя из общих теорем
механики.</p>
</body>
</html>
Совмещение, слияние изображений по вертикали
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения по вертикали</title>
<style>
.img {
line-height: 1px; /* Межстрочное расстояние */
}
</style>
</head>
<body>
<p class="img"><img src="images/ecctitle.png" alt="Название"
width="640" height="158"><br>
<img src="images/navigate.png" alt="Навигация" width="640" height="30"></p>
</body>
</html>
или
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Изображения по вертикали</title>
<style>
.center {
margin: 0 auto; /* Выравнивание блока по центру */
width: 640px; /* Ширина блока */
line-height: 1px; /* Межстрочное расстояние */
}
</style>
</head>
<body>
<div class="center">
<img src="images/ecctitle.png" alt="Название" width="640" height="158">
<img src="images/navigate.png" alt="Навигация" width="640" height="30">
</div>
</body>
</html>
Совмещение, слияние изображений по горизонтали
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотографии</title>
</head>
<body>
<p>
<img src="images/thumb1.jpg" alt="Фотография 1" width="120" height="120">
<img src="images/thumb2.jpg" alt="Фотография 2" width="120" height="120">
<img src="images/thumb3.jpg" alt="Фотография 3" width="120" height="120">
<img src="images/thumb4.jpg" alt="Фотография 4" width="120" height="120">
</p>
</body>
</html>
Отражение изображения
transform: scale(-1, 1) — отражение по горизонтали;
transform: scale(1, -1) — отражение по вертикали;
transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Отражение</title>
<style>
.mirrorY { transform: scale(1, -1); }
</style>
</head>
<body>
<img src="images/spam.jpg" alt="Спам">
<img src="images/spam.jpg" alt="Спам" class="mirrorY">
</body>
</html>
Замена текста изображением, спрятать текст и вывести изображение
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Замена текста</title>
<style>
h1, h2 {
overflow: hidden; /* Скрывает область */
height: 0; /* Нулевая высота заголовка */
}
h1 {
background: url(images/head1.png) no-repeat; /* Фоновый рисунок для замены текста */
padding-top: 54px; /* Высота изображения */
}
h2 {
background: url(images/head2.png) no-repeat;
padding-top: 28px;
margin-bottom: 0;
}
</style>
</head>
<body>
<h1>История Белоснежки</h1>
<p>Столкнувшись со сложной задачей создания полнометражного
мультфильма, Дисней понимал, что имеющиеся технические средства ему
не подходят.</p>
<h2>Интересные факты</h2>
<p>Уолт Дисней специально не смотрел на актрис, которые
пробовались на озвучивание роли Белоснежки. Так он мог объективно
оценить голос.</p>
</body>
</html>
Изменение изображения при наведении мыши, эффект перекатывания
Готовятся два изображения одинакового размера, одно для исходного вида, а второе — для его замены при эффекте перекатывания. Поскольку второй рисунок загружается только при наведении курсора на ссылку, то отображение картинки происходит с некоторой паузой.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Эффект перекатывания</title>
<style>
a.rollover {
background: url(images/sun1.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 196px; /* Ширина рисунка */
height: 183px; /* Высота рисунка */
}
a.rollover:hover {
background: url(images/sun2.png); /* Путь к файлу с заменяемым рисунком */
}
</style>
</head>
<body>
<p><a href="#" class="rollover"> </a></p>
</body>
</html>
Изменение изображения при наведении мыши, эффект перекатывания с одним рисунком
Смена одного рисунка на другой происходит сдвигом изображения по вертикали за счёт использования универсального свойства background или background-position. Для селектора A устанавливается фоновое изображение через свойство background, ширина (width) совпадает с рисунком, а высота (свойство height) равна половине высоты изображения.
<html>
<head>
<meta charset="utf-8">
<title>Эффект перекатывания</title>
<style>
a.rollover {
background: url(images/mark.png); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
a.rollover:hover {
background-position: 0 -40px; /* Смещение фона */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
Полупрозрачное изображение
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Прозрачность</title>
<style>
.transparent75 {
filter: alpha(Opacity=75); /* Полупрозрачность для IE */
opacity: 0.75; /* Полупрозрачность для других браузеров */
}
.transparent50 {
filter: alpha(Opacity=50);
opacity: 0.5;
}
.transparent25 {
filter: alpha(Opacity=25);
opacity: 0.25;
}
</style>
</head>
<body>
<p>
<img src="images/cat.jpg" alt="Оригинальное изображение"
width="250" height="243">
<img src="images/cat.jpg" alt="Непрозрачность 75%"
width="250" height="243" class="transparent75">
<img src="images/cat.jpg" alt="Непрозрачность 50%"
width="250" height="243" class="transparent50">
<img src="images/cat.jpg" alt="Непрозрачность 25%"
width="250" height="243" class="transparent25">
</p>
</body>
</html>
Два фоновых изображения для div слева и справа
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
body {
background: #f2f0e3; /* Цвет фона веб-страницы */
}
.block {
background: url(images/bg_left.gif) repeat-y,
#fff url(images/bg_right.gif) repeat-y 100% 0;
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div class="block">
За 11 месяцев вахты радисты провели 8642 сеансов связи общим
объемом 300625 групп. Это только метео и аэротелеграммы.
Принято от радиостанции мыс Челюскин 7450 групп.
</div>
</body>
</html>
Фон любого изображения на всю страницу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Растягиваемый фон</title>
<style>
body {
background: url(images/sun2.png) no-repeat;
-moz-background-size: 100%; /* Firefox 3.6+ */
-webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
-o-background-size: 100%; /* Opera 9.6+ */
background-size: 100%; /* Современные браузеры */
}
</style>
</head>
<body>
</body>
</html>
Два фоновых любых изображений на всю страницу слева и справа
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Два фоновых изображения</title>
<style>
html {
background: #fc0 url(images/bgleft.png) repeat-y; /* Цвет фона веб-страницы,
путь к графическому файлу с фоном и
повторение фона по вертикали */
height: 100%; /* Высота элемента */
}
body {
background: url(images/bgright.png) repeat-y 100% 0; /* Путь к графическому файлу с фоном,
повторение фона по вертикали,
расположение картинки по
правому краю окна браузера */
margin: 0; /* Обнуляем отступы на странице */
height: 100%; /* Высота элемента */
}
p {
margin: 0; /* Обнуляем отступы */
padding: 5px 0 0 20px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<p>Содержимое веб-страницы</p>
</body>
</html>
Повторение фона всей страницы только по вертикали
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Повторение фона по вертикали</title>
<style>
body {
padding-left: 100px; /* Поле слева */
background:
url(images/pattern-left.png) repeat-y; /* Путь к графическому файлу и
повторение фона по вертикали */
}
</style>
</head>
<body>
<p>Человек должен уметь иногда посмеяться над собой, иначе
он сойдёт с ума. Об этом, к сожалению, знают немногие,
поэтому в мире так много сумасшедших.</p>
<p>Рафаэль Сабатини</p>
</body>
</html>
Остановить повторение фона всей страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фон</title>
<style>
body {
background: url(images/bg2.png) no-repeat; /* Параметры фона */
}
</style>
</head>
<body>
<p>Содержимое веб-страницы</p>
</body>
</html>
Фиксирование фонового рисунка в углу страницы
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Положение фонового рисунка</title>
<style>
html {
height: 100%; /* Высота страницы */
}
body {
background:
url(images/tomatos.jpg) right bottom no-repeat; /* Путь к файлу с изображением,
положение в правом нижнем углу
и отмена повторения фона */
margin-right: 200px; /* Отступ справа */
}
</style>
</head>
<body>
<h1>Консервы из помидор</h1>
<p>Плоды отбирают с хорошей ровной окраской, плотные и однородные по
размеру, укладывают в банки и заливают кипящим рассолом (на 1 л воды - 35 г
поваренной соли и 6 г лимонной кислоты). Банки прикрывают крышками и
ставят на прогревание, выдерживая в кипящей воде: литровые - 5-8,
трехлитровые - 12-15 мин. Затем их укупоривают и охлаждают.</p>
<p>Примерный расход сырья и продуктов на литровую банку: помидоров
красных отборных - 550-600 г, соли - 15 г, лимонной кислоты - 3 г.</p>
</body>
</html>
Изображения, которые не находятся в начале страницы, позволяет отложить загрузку до момента, когда пользователь начинает прокручивать страницу в их направлении
<img src="example.jpg" alt="Описание" loading="lazy">
Версии изображений разного размера для различных устройств
<img src="default.jpg"
alt="Адаптивное изображение"
srcset="small.jpg 320w, medium.jpg 480w, large.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
>
или так
<img
srcset="
elva-fairy-320w.jpg 320w,
elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w
"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
Тег picture с загрузкой разных изображений для разных устройств
В теге picture размещаем тег source для определения источников изображений. У каждого тега source есть атрибут srcset, который указывает путь к изображению. Атрибут media описывает условия, при которых будет загружаться соответствующее изображение. Например, media=»(min-width: 1200px)» означает, что изображение logotype-desktop.svg будет загружаться, если ширина экрана равна или больше 1200px. В конце добавляем элемент img, который будет использоваться в случае, если браузер не поддерживает тег picture или не выполняется ни одно из условий, определённых в тегах source. Здесь указываем путь к изображению img/logotype-phone.svg и добавляем альтернативный текст с помощью атрибута alt.
<picture> <source media="(min-width: 1200px)" srcset="img/logotype-desktop.svg"> <source media="(min-width: 768px)" srcset="img/logotype-tablet.svg"> <img src="img/logotype-phone.svg" width="226" height="30" alt="Барбершоп «Бородинский»."> </picture>
Тег picture и изменение размера изображения для указанного размера экрана устройства
<picture> <source type="image/webp" srcset="my-photo-lg.webp 1200w, my-photo-md.webp 800w, my-photo-sm.webp 500w" sizes="(max-width: 800px) 90vw, (max-width: 500px) 70vw, 50vw" > <img srcset="my-photo-lg.jpg 1200w, my-photo-md.jpg 800w, my-photo-sm.jpg 500w" sizes="(max-width: 800px) 90vw, (max-width: 500px) 70vw, 50vw" src="my-photo-lg.jpg" width="280" height="460" > </picture>
И снова пример фонового изображения для блока
.image-container {
background-image: url("images/keks.jpg");
width: 600px;
height: 400px;
}
scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
fix — фон фиксируется.
local — фон фиксируется с учётом содержимого элемента.
background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px. Ключевые слова для расположения по оси X:
right — право;
left — лево.
Ключевые слова для расположения по оси Y:
top — сверху;
bottom — снизу.
Можно сочетать разные значения:
background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/
background-position: 50% bottom; /* фон будет посередине и снизу*/
background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/
Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y. Они принимают такие же значения, как и background-position.
Следующее CSS-свойство — background-repeat, оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat, то есть фоновое изображение повторяется по вертикали и горизонтали:
no-repeat — не повторять изображение,
repeat-x — повторять только по горизонтали
repeat-y — повторять только по горизонтали.
background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.
background-size: /*размер по ширине*/ /*размер по высоте*/
Ключевые слова:
auto — оставляет исходный размер изображения.
contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.
Тег figure
С июля 2015 года практически все браузеры обеспечивают поддержку универсального HTML-тега figure, который представляет собой средство вывода иллюстрации с необязательной подписью, иногда называемой заголовком. В общем виде тег представляет собой следующую конструкцию:
<figure class="sign"> <p><img src="images/helen.jpg" width="150" height="212" alt="Скульптура"></p> <figcaption>Деревянная скульптура</figcaption> </figure>
Внутри тега figure допускается более одного изображения:
<figure> <img src="minsk.jpg" alt="Центр Минска"> <img src="vitebsk.jpg" alt="Витебск, площадь тысячелетия" > <figcaption>Фото городов Беларуси</figcaption> </figure>
Совместное использование figure и picture
<figure>
<picture>
<source srcset="image-big.png" type="image/png" media="(min-width: 1200px)">
<source srcset="image-medium.png" type="image/png" media="(min-width: 768px)">
<img src="image-small.png" alt="Описание изображения" class="img-fluid">
</picture>
<figcaption>Заголовок к изображению</figcaption>
</figure>
