Масштабируемые изображения

Иллюстрация к статье «Масштабируемые изображения»

Хочется вернуться к одному из интересных приёмов CSS-верстки, но тем не менее так редко используемому — эластичной вёрстке. Точнее к тому, что в ней часто не дорабатывают, чтобы она стала действительно эластичной.

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

Для тех, кто не в курсе что такое эластичная вёрстка ссылки: раз, два.

Варианты масштабирования изображений с помощью CSS

Остановлюсь на тех вариантах, которые смог вспомнить в течение первых 15 минут или подсмотреть на западных сайтах. Варианты того, о чём буду писать, можно сразу посмотреть на демо-странице. Зажимаем Ctrl на клавиатуре и крутим туда-сюда колесо мыши, а также делаем ресайз окна браузера, чтобы увидеть результат.

Для тестирования не подойдут Opera 9 и Moziila Firefox 3, как и другие браузеры, в которых реализован полноценный pixel zoom. В них эти примеры отлично работают, но увеличение изображений по отношению к другим элементам в них происходит без наших усилий и доработок в вёрстке. Просто увеличивается вся страница сразу.

Способов динамически менять размеры изображений на веб-страницах всего два: через % или через em. Различие между ними в том, что при использовании процентов размер считается по отношению к родительскому контейнеру (в моём примере это окно браузера), а при использовании em – относительно размеров используемого шрифта.

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

Используем тег img

На странице-примере это пункты 2 и 3.

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

Если всё-таки видны искажения и автоматическая подгонка размеров не даст хорошего результата, можно попробовать сохранить картинку в Photoshop, но с разрешением большим чем 72 pixels/inch, стандартное для мониторов. Иногда помогает.

А чтобы не запутаться в цифрах при расчётах перевода px в em и наоборот, пользуйтесь em calculator.

Используем тег img, внутри тега div

Примеры номер 4 и 5. Лишние участки обрезаются с помощью overflow:hidden.

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

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

Ещё одна трудность связана с тем, что невозможно высчитать размер высоты div в процентах. Для этого нужно точно знать размер родителя, а в условиях динамического содержимого это практически нереальная задача. Поэтому лучше задавать для div абсолютную высоту картинки в px или примерные размеры в em.

Вставляем изображение в div фоном

Примеры 6, 7. Несколько лучший вариант, чем предыдущий.

Проблема с высотой div остаётся и здесь, но зато легко решается вопрос с размытым фоном. Можно использовать свойство background-position, чтобы контролировать положение главного объекта на фотографии.

Ещё посоветую использовать фоновый цвет или рамку для div, чтобы когда размер контейнера превысит размер катринки при масштабировании, не получилось, что картинка «болтается в воздухе» и не привязана ни к одной из направляющих сетки.

Общее

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

Лично мне нравится вариант номер 2 для изображений в тексте и номера 6, 7 для фоновых украшений при различных вёрстках.

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

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

* * *

Сканер блогов:

Ещё не читали про склоки на хабре? Вот официальная позиция TurboMilk. Переменные в CSS. Полезные ссылки на заметку SEO'шнику.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 8

  1. english_man, 31.10.2008 в 14:43

    Давно доставал меня этот вопрос по поводу эластичности страниц и изображений. Буду рекомендации воплощать в жизнь на своем блоге:)

    Ответить

  2. Как продвигать сайты статьями?, 01.11.2008 в 18:41

    [...] масштабировать изображения. Rambler выбыл из тройки самых популярных [...]

    Ответить

  3. минский дизайнер, 03.11.2008 в 12:10

    масштабируемые и... располгающиеся друг относительно друга автоматом для лучшего восприятия

    www.alistapart.com/articles/magazinelayout/

    вообще в техвопросах много интересного, приятно, что хоть кто-то уделяет внимание деталям.

    Не то что... ну ладно, просто спасибо.

    Ответить

  4. rotor, 03.11.2008 в 13:53

    Паша, интересная ссылка, thx. Что-то я пропустил эту статью на ALA.

    Особенно понравился example 5.

    Ответить

  5. минский дизайнер, 03.11.2008 в 15:43

    Женя, статья-то не новая, но сам случайно наткнулся только пару недель назад (как и сам лист читаю не с детского сада). В закладках валялась, а тут на тебе — органичное продолжение темы.

    Ответить

  6. invest, 08.11.2008 в 14:36

    Маштабировать изображение...все класс и статья и информация...только вот одно настараживает..."конечно же это дополнительый вес для страницы"

    Ответить

  7. 96% или резиновая модульная сетка для Web | rotorweb.ru | Проблемы и решения в Web-дизайне, 14.04.2009 в 1:59

    [...] Пример эластичной страницы вы можете увидеть в статье «Масштабируемые изображения». [...]

    Ответить

  8. Владимир, 30.03.2012 в 9:36

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

    Ответить

Есть что сказать?