Не сжимайте меня: применение min-width к тянущимся изображениям

Применение min-width к тянущимся изображениям

От автора: существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.

Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.

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

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

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

Будучи ограничено меньшим контейнером (например, узким экраном), оно автоматически масштабируется под его размеры:

Все это прекрасно. Но существует предел того, насколько разумно маленьким может быть изображение. Будучи масштабированным до размера экрана смартфона, текст в этом изображении едва читается. Конечно, пользователь может применить увеличение, но когда при беглом просмотре статьи приходится что-то увеличивать и уменьшать, это сильно раздражает.

Зачастую мы способны применить некое дизайнерское решение, чтобы исправить такое состояние: представить на маленькие экраны другое изображение, на котором, например, содержимое организовано более подходящим образом. Но иногда это невозможно… скажем, при простом отображении контента из CMS.

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

<img src="path/to/image" style="min-width:25em">

а затем добавьте горизонтальный скрол:

/* Часто контейнер является ячейкой сетки */
.grid__item {
    overflow-x: auto;
}

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

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

О, нет! Встроенные стили! Они плохие, да?

В данном случае я так не считаю. Это заявление напрямую связано с содержимым изображения: оно определено размером текста в нем. Поэтому я думаю, что заявление минимальной ширины в HTML – абсолютно здравая мысль.

Если бы поддержка выражения CSS attr() была получше, я бы соблазнился сделать это так:

<img src="path/to/image" data-min-width="25em">
img {
    min-width: attr(data-min-width);
}

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

Ладно, а em’ы?

Да – минимальный размер этого изображения – это пункт, где текст становится сложно читаемым для пользователя, привычного к размерам шрифта по умолчанию. Если пользователь увеличивает размер шрифта своего браузера, минимальный размер этого изображения (и отсюда минимальный размер текста в нем) тоже увеличится. Хорошо.

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

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

Но если не можете, думаю, этот маленький прием окажется легким способом в попытке поддержания юзабилити, или же подействует как страховочная сеть в неудобные, непродуманные в вашем дизайне моменты.

Автор: Stu

Источник: http://www.stucox.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree