Не стискайте мене: застосування min-width до тягнеться зображень

16

Від автора: існує межа того, наскільки розумно маленьким може бути зображення. Будучи масштабированным до розміру екрану смартфона, текст на зображенні ледве читається. Звичайно, користувач може застосувати збільшення, але коли при побіжному перегляді статті доводиться щось збільшувати і зменшувати, це сильно дратує.

Часто ми здатні застосувати якесь дизайнерське рішення, щоб виправити такий стан: подати на маленькі екрани інше зображення, на якому, наприклад, вміст організовано більш підходящим чином. Але іноді це неможливо… скажімо, при простому відображення контенту з CMS.

Досить легко можна призначити max-width: 100% зображенню в гнучкої розмітці для того, щоб воно адаптувалося до свого контейнера:

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

При наявності достатнього простору воно займе стільки місця, скільки йому потрібно:

Не стискайте мене: застосування min-width до тягнеться зображень

Будучи обмежена меншим контейнером (наприклад, вузьким екраном), воно автоматично масштабується під розміри:

Не стискайте мене: застосування min-width до тягнеться зображень

Все це чудово. Але існує межа того, наскільки розумно маленьким може бути зображення. Будучи масштабированным до розміру екрану смартфона, текст на зображенні ледве читається. Звичайно, користувач може застосувати збільшення, але коли при побіжному перегляді статті доводиться щось збільшувати і зменшувати, це сильно дратує.

Часто ми здатні застосувати якесь дизайнерське рішення, щоб виправити такий стан: подати на маленькі екрани інше зображення, на якому, наприклад, вміст організовано більш підходящим чином. Але іноді це неможливо… скажімо, при простому відображення контенту з CMS.

Отже, обміркуйте можливість застосування min-width для визначення найменшого розумного розміру візуалізації даного зображення:

Не стискайте мене: застосування min-width до тягнеться зображень

а потім додайте горизонтальний скрол:

/* Часто контейнер є осередком сітки */
.grid__item {
overflow-x: auto;
}

Я спочатку запропонував використовувати overflow-x: scroll, але, як це вірно вказав Тел Бен-Арі (Tal Ben-Ari) в коментарях, в деяких системах з-за цього залишиться постійна смуга прокрутки.

Таким чином, коли контейнер занадто малий, зображення залишиться розумного розміру і користувач зможе просто прокрутити його, щоб переглянути залишок зображення.

О, ні! Вбудовані стилі! Вони погані, так?

В даному випадку я так не вважаю. Це заяву безпосередньо пов’язане з вмістом зображення: воно визначено розміром тексту в ньому. Тому я думаю, що заява мінімальної ширини в HTML – абсолютно слушна думка.

Якби підтримка вираження CSS attr() була трохи краще, я б спокусився зробити це так:

Не стискайте мене: застосування min-width до тягнеться зображень
img {
min-width: attr(data-min-width);
}

… але, на жаль, поки його не розпізнає жоден браузер (вони зрозуміють тільки attr() при його використанні властивість CSS content для згенерованого контенту).

Гаразд, а em’и?

Так, мінімальний розмір цього зображення – це пункт, де текст стає складно читаються для користувача, звичного до розмірів шрифту за замовчуванням. Якщо користувач збільшує розмір шрифту свого браузера, мінімальний розмір цього зображення (і звідси мінімальний розмір тексту в ньому) теж збільшиться. Добре.

Відповідний мінімальний розмір іншого зображення міг бути точкою, в якій ключові характеристики вже не візуалізуються на екрані належним чином, тому краще підійшло б до мінімального розміру, визначеному в пікселях. Ось маленький демо-приклад:

Не стискайте мене: застосування min-width до тягнеться зображень

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

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