Респонсивні зображення

Уявіть зображення 1200x600 пікселів. Воно відмінно виглядає на широкому екрані. А що буде, якщо ми відкриємо сторінку на телефоні або планшеті? Нічого хорошого. Зображення буде залишатися шириною 1200 пікселів, і з'явиться горизонтальна смуга прокручування, а на ретіні воно буде виглядати розмитим.

Респонсивні зображення - це термін для опису набору прийомів, що використовуються в HTML і CSS, за допомогою яких контентні та фонові зображення виглядають однаково добре на пристроях з різними розмірами і щільністю екрану.

Найпростіший спосіб реалізувати респонсивність - це використовувати одне зображення для всіх пристроїв, задавши йому певний набір CSS-властивостей.

/* Властивості потрібно застосувати до всіх зображень,
    тому використовується селектор тегу. */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

• Зображення необхідно зробити блоковим, щоб прибрати нижній «відступ» рядкового елемента.
• Максимальна ширина 100% гарантує те, що зображення буде зменшуватися за потреби, але не розтягнеться більше за 100% своєї оригінальної ширини (щоб не втрачати якість).
• Автоматична висота встановлюється для того, щоб зображення зберігало оригінальні пропорції при зміні ширини.

Увага

Так працює техніка простого респонсивного контентного зображення - одне зображення для всіх пристроїв, яке підлаштовується під поточну ширину свого батьківського елемента.

Створимо контейнер для зображення div.thumb, задамо йому мінімальну і максимальну ширину. Зображенню дамо респонсивні властивості. Тепер зображення буде завжди гарно заповнювати «тумбу», змінюючи свій розмір, залежно від ширини батька.

Увага

Цей базовий підхід для контентних зображень занадто простий і не вирішує проблему Retina-екранів і ваги великого зображення на мобільних пристроях, але це хороший старт.