От автора: существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.
Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.
Довольно легко можно назначить max-width: 100% изображению в гибкой разметке для того, чтобы оно адаптировалось к своему контейнеру:
|
1 2 3 4 |
img { max-width: 100%; height: auto; } |
При наличии достаточного пространства оно займет столько места, сколько ему требуется:
Будучи ограничено меньшим контейнером (например, узким экраном), оно автоматически масштабируется под его размеры:
Все это прекрасно. Но существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.
Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.
Итак, обдумайте возможность применения min-width для определения самого маленького разумного размера визуализации данного изображения:
|
1 |
<img src="path/to/image" style="min-width:25em"> |
а затем добавьте горизонтальный скрол:
|
1 2 3 4 |
/* Часто контейнер является ячейкой сетки */ .grid__item { overflow-x: auto; } |
Я изначально предложил использовать overflow-x: scroll, но, как это верно указал Тэл Бен-Ари (Tal Ben-Ari) в комментариях, в некоторых системах из-за этого останется постоянная полоса прокрутки.
Таким образом, когда контейнер слишком мал, изображение останется разумного размера и пользователь сможет просто прокрутить его, чтобы просмотреть остаток изображения.
О, нет! Встроенные стили! Они плохие, да?
В данном случае я так не считаю. Это заявление напрямую связано с содержимым изображения: оно определено размером текста в нем. Поэтому я думаю, что заявление минимальной ширины в HTML – абсолютно здравая мысль.
Если бы поддержка выражения CSS attr() была получше, я бы соблазнился сделать это так:
|
1 |
<img src="path/to/image" data-min-width="25em"> |
|
1 2 3 |
img { min-width: attr(data-min-width); } |
… но, к сожалению, пока его не распознает ни один браузер (они поймут только attr() при его использовании со свойством CSS content для сгенерированного контента).
Ладно, а em’ы?
Да – минимальный размер этого изображения – это пункт, где текст становится сложно читаемым для пользователя, привычного к размерам шрифта по умолчанию. Если пользователь увеличивает размер шрифта своего браузера, минимальный размер этого изображения (и отсюда минимальный размер текста в нем) тоже увеличится. Хорошо.
Подходящий минимальный размер другого изображения мог быть точкой, в которой ключевые характеристики уже не визуализируются на экране должным образом, поэтому лучше подошло бы к минимальному размеру, определенному в пикселях. Вот маленький демо-пример:
Конечно, это бывает уместно или неуместно. Определенно, на вид страницы оказывается влияние. Как я уже говорил, хорошо, если вы можете решить этот вопрос с помощью дизайна.
Но если не можете, думаю, этот маленький прием окажется легким способом в попытке поддержания юзабилити, или же подействует как страховочная сеть в неудобные, непродуманные в вашем дизайне моменты.
Автор: Stu
Источник: //www.stucox.com/
Редакция: Команда webformyself.
