Створення чуйних зображень за допомогою CSS

16

Від автора: У цієї навчальної статті ви навчитеся дуже простий техніці створення чуйних зображень.

Створення чуйних зображень за допомогою CSSСтворення чуйних зображень за допомогою CSS

Створення чуйних зображень за допомогою CSS

Існує багато технік по створенню чуйних зображень. Вони відрізняються за складністю та браузерної підтримки.
Приклад складного створення чуйних зображень — це використання атрибуту srcset, який вимагає декількох зображень і використовує більше розмітки, а також він спирається на новий HTML атрибут, який не має хорошої підтримки поза сучасних браузерів.

Але в даній статті ми розглянемо метод, який, навпаки, є простим і спирається лише на CSS властивості width і height. А це означає, що даний метод буде працювати у всіх браузерах і на всіх пристроях. Однак, для цього потрібно, щоб дизайн веб-макета було «гумовим»/чуйним.

В даній навчальній статті ви побачите кілька варіантів реалізації чуйних зображень, але основний сенс буде одним і тим же: використовуючи CSS, задавати зображень виражене у відсотках (або з використанням будь-яких відносних одиниць вимірювання, наприклад, ems) значення для властивості width, а для властивості height вказувати значення auto.

img {
width: 100%;
height: auto;
}

Просте чуйне зображення

Давайте почнемо з базового прикладу. У нас є елемент div, який виступає в якості контейнера для елемента img.

HTML

Створення чуйних зображень за допомогою CSS

Значення властивості width біля контейнера виставлено на 96%, тобто у нього присутні ліві і праві зовнішні відступ (margin). Також йому встановлено властивість max-width у значенні 960px, щоб макет не був надто широким на великих екранах. Елемент img, всередині контейнера, має властивість width зі значенням 100%, щоб його ширина завжди дорівнювала ширині контейнера, незалежно від розмірів області перегляду (viewport). Таким чином зображення стає чуйним. Властивість height має значення auto, щоб зображення масштабировалось пропорційно.

CSS

div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* щоб відцентрувати контейнер */
}
img {
width: 100%;
height: auto;
}

Зверніть увагу на те, що елемент img буде чуйним навіть у тому випадку, якщо для нього вказані фіксовані розміри через атрибути HTML розмітки (тобто width=»960″ height=»640″). Це чудово, оскільки дана техніка підходить для підтримки і обслуговування контенту, для якого задані фіксовані розміри в HTML.

Чуйні зображення та колонки

Іноді нам хочеться, щоб зображення розташовувалися поруч один з одним в колонках. Наприклад, в галереях часто використовуються сітки для відображення ескізів зображень. Щоб створити чуйні зображення в колонках, нам потрібно тільки зменшити значення CSS властивості width і задати для елементів img властивість display зі значенням inline-block. Давайте розглянемо декілька варіантів макета: двухколоночный і трехколоночный макет з зображеннями.

Двухколоночный чуйний макет із зображеннями

Для подібного макета ми можемо встановити CSS властивість width зі значенням 48% або, грубо кажучи, половина ширини контейнера. Причина, по якій ми не вказуємо 50%, полягає в тому, щоб залишити місце під зовнішні відступи.

HTML

Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS

CSS

img {
width: 48%;
display: inline-block;
}

Трехколоночный чуйний макет із зображеннями

Для даного макету ідея залишається незмінною, тобто ми просто виставляємо для властивості width значення дорівнює одній третій ширини контейнера: 32%.

HTML

Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS

CSS

.three-columns {
width: 32%;
display: inline-block;
}

Зображення з умовними переходами

Наявність кількох умовних переходів для чуйних зображень — це хороша ідея, оскільки якщо зображення стануть занадто маленькими, колонки можуть просто «схопитися». А щоб це сталося, нам потрібні медіа-запити. У наступному прикладі зображення будуть відображатися в одну колонку на смартфонах, у дві колонки — на планшетах і в чотири колонки — на великих екранах.

HTML

Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS
Створення чуйних зображень за допомогою CSS

CSS

/* Для пристроїв з невеликим екраном (наприклад, смартфони) */
img {
max-width: 100%;
display: inline-block;
}
/* Для пристроїв з середнім екраном (наприклад, планшети) */
@media (min-width: 420px) {
img {
max-width: 48%;
}
}
/* Для пристроїв з великим екраном (наприклад, настільні комп’ютери) */
@media (min-width: 760px) {
img {
max-width: 24%;
}
}

На замітку: Буде добре, якщо ви виставите відповідні медіа-запити для кожного дизайну, над яким ви працюєте. У нашому демо-прикладі вищенаведені медіа-запити відмінно працюють для даного макету, але все може бути по-іншому з іншими макетами.

Повноекранні чуйні зображення

Щоб створити зображення, які завжди будуть займати 100% області перегляду, нам потрібно просто прибрати біля контейнера властивість max-width (зі значенням 960px) і задати для нього властивість width зі значенням 100%.

.container {
width: 100%;
}
img {
width: 100%;
}

Попередження

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

Якщо ви хочете додатково довантажувати для користувачів різні версії одного зображення (наприклад, невелике зображення для мобільних пристроїв, а велику — для настільних комп’ютерів), щоб поліпшити продуктивність мобільного веба, познайомтеся з атрибутом srcset. Якщо ви віддаєте перевагу використання полифиллов (polyfill), щоб забезпечити підтримку у поточних версіях браузерів, зверніть увагу на полифилл Скотта Джели (Scott Jehl) під назвою Picturefill.