Адаптивный веб-дизайн - Изображения
Каким бы ни был размер экрана, адаптивное изображение автоматически подстраивается под него.
Использование свойства width
Один из способов получить адаптивное изображение — процентное значение width вместе с height, равным auto. При изменении размера браузера изображение увеличивается и уменьшается вместе с ним.
Примечание: при таком подходе изображение может вырасти больше своего исходного размера, поэтому во многих случаях max-width — лучший выбор.
Пример
width: 100% и height: auto, чтобы сделать его адаптивным. Используйте любой URL изображения-заполнителя, например «img_chania.jpg».
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - width Property</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect:</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Использование свойства max-width
max-width, равный 100%, позволяет изображению уменьшаться при необходимости, но не даёт ему превысить свой исходный размер.
Пример
max-width: 100% и height: auto, чтобы изображение уменьшалось, но никогда не увеличивалось больше своего исходного размера.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image - max-width Property</title>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect. The image will never scale up to be larger than its original size.</p>
<img src="img_chania.jpg" alt="Chania">
</body>
</html>
Добавление изображения на пример веб-страницы
Пример
width: 100% и height: auto, чтобы быть адаптивным в содержимом страницы.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image in Web Page</title>
<style>
img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Responsive Web Page with Image</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
<img src="img_chania.jpg" alt="Chania">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</body>
</html>
Фоновые изображения
Изменение размера и масштабирование могут затрагивать и фоновые изображения, и вы можете выбрать один из трёх разных методов:
Использование background-size: contain
Здесь изображение масштабируется, пытаясь вписаться в область содержимого, а его соотношение сторон (пропорциональное соотношение между шириной и высотой) остаётся неизменным.
background-size: contain, background-repeat: no-repeat, шириной 100%, высотой 400px и сплошной чёрной рамкой в 1px.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Contain</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-repeat: no-repeat;
background-size: contain;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: contain</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Использование background-size: 100% 100%
Здесь изображение растягивается, пока не будет покрыта вся область содержимого.
background-size: 100% 100%, шириной 100%, высотой 400px и сплошной чёрной рамкой в 1px.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Stretch</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: 100% 100%;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: 100% 100%</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Использование background-size: cover
Здесь масштабирование продолжается, пока не будет покрыта вся область содержимого. Соотношение сторон сохраняется, поэтому часть изображения может быть обрезана.
background-size: cover, шириной 100%, высотой 400px и сплошной чёрной рамкой в 1px.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Image - Cover</title>
<style>
div {
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid black;
}
</style>
</head>
<body>
<h2>background-size: cover</h2>
<p>Resize the browser window to see the effect.</p>
<div></div>
</body>
</html>
Разные изображения для разных устройств
То, что подходит для большого экрана компьютера, может быть бесполезным на маленьком устройстве, а большое изображение добавляет нагрузку. Медиазапросы уменьшают эту нагрузку, показывая разные изображения на разных устройствах.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Different Images for Different Devices</title>
<style>
/* 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');
}
}
</style>
</head>
<body>
<h2>Different Images for Different Devices</h2>
<p>Resize the browser window to see the background image change at 400px.</p>
</body>
</html>
HTML-элемент <picture>
Для адаптивных дизайнов HTML-элемент <picture> даёт больше гибкости при указании источников изображений.
Вместо того чтобы увеличивать или уменьшать одно изображение вместе с шириной области просмотра, вы предоставляете несколько изображений, каждое из которых предназначено для своего размера экрана. Как и в случае с <video> и <audio>, вы перечисляете разные источники, и браузер использует первый подходящий.
Каждый источник определяет своё изображение с помощью обязательного атрибута srcset и может принимать медиазапросы через необязательный атрибут media. Для браузеров без поддержки <picture> добавьте элемент <img> в качестве резервного варианта.
Пример
<picture> с двумя элементами <source> и резервным <img>. Один source должен использовать атрибут media для max-width: 400px, чтобы предоставлять меньшее изображение, а другой — большее изображение.
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The HTML picture Element</title>
</head>
<body>
<h2>The HTML picture Element</h2>
<p>Resize the browser window to load different images.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>
Адаптивная галерея изображений
Flexbox и медиазапросы могут работать вместе, создавая адаптивную галерею изображений.
Пример
Результат: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.gallery {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
.gallery img {
width: 100%;
padding: 4px;
}
/* One column (for small screens) */
.gallery img {
width: 100%;
}
/* Two columns (for medium screens) */
@media only screen and (min-width: 600px) {
.gallery img {
width: 50%;
}
}
/* Four columns (for large screens) */
@media only screen and (min-width: 992px) {
.gallery img {
width: 25%;
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<p>Resize the browser window to see the effect.</p>
<div class="gallery">
<img src="img_5terre.jpg" alt="Cinque Terre">
<img src="img_forest.jpg" alt="Forest">
<img src="img_lights.jpg" alt="Northern Lights">
<img src="img_mountains.jpg" alt="Mountains">
</div>
</body>
</html>