Ниже приведен небольшой фрагмент, опубликованный в последнем представлении «Дизайн».
Во время публикации я отметил, что IE7 позволяет вам использовать CSS для установки ширины изображения в процентах (например, 30%), но он не смог пересчитать этот процент, если вы изменили размер браузера и произвели полное обновление. требуется для принудительного изменения размера графики.
Постоянный гуру CSS и соавтор нашей новой ссылки CSS , Пол О’Брайен указал на хорошее решение этой ошибки, которое я подробно опишу ниже.
**************************
Иногда самой большой силой Интернета может быть и его самая большая ахиллесова пята.
Каким бы умным веб-контент ни занимался при переформатировании под разные устройства и размеры экрана, я всегда борюсь с одной проблемой компоновки — тот факт, что жидкие макеты сайтов растягиваются, а изображения — нет.
Хотя макет может растягиваться и сжиматься, а текст может перемещаться и обтекать, изображениям при рождении назначается размер в пикселях, и именно так они отображаются в дальнейшем, независимо от их окружения.
В большинстве типовых макетов статей или постов в блоге это не представляет большой проблемы. На действительно большом экране изображения могут показаться немного меньше, но, пока текст правильно обтекает изображение, он обычно выглядит немного тяжелым, а не просто неправильным.
Я вижу эту проблему в основном в графических заголовках сайтов и в графических объявлениях (как показано ниже). Как правило, чем более сбалансированными и стройными они выглядят при меньшей ширине браузера, тем более растерянными и слабыми они выглядят на широких экранах.
Итак, каковы ваши варианты изменения размера этих макетов?
1) Adobe Flash: векторная графика всегда будет идеальным инструментом для изменения размера, а Flash всегда был векторным инструментом, поэтому, если ваши исходные изображения в основном векторные, есть несколько веских причин для встраивания всего этого в SWF.
2) Canvas: элемент canvas является частью новой спецификации HTML5 и в настоящее время на удивление хорошо поддерживается большинством ведущих браузеров. Тег canvas ( <canvas> ) сам по себе является не чем иным, как пустым пространством для рисования, ожидающим нашего заполнения, но для его эффективного использования вам понадобится JavaScript-вуду.
Пока мы оставим холст в покое, но, похоже, он представляет некоторые действительно интересные варианты, поэтому мы вернемся к нему в режиме конструктора в ближайшем будущем.
3) Интеллектуальное изменение размера изображения / вырезание шва: вырезание шва, вероятно, является модным словом 2007 года, и если вы следили за блогами и форумами SitePoint в течение последних месяцев, вы, вероятно, уже знаете об этой идее. Это как раз та ситуация, в которой бы прорезывался шов.
К сожалению, несмотря на то, что концепция блестящая, способ ее развертывания на странице все еще выглядит как минимум на несколько месяцев на этом этапе и, скорее всего, будет зависеть от Flash.
Однако, пока мы ждем более совершенных технологий, я придумала альтернативный метод изменения размера изображения в определенных ситуациях . Это, конечно, не применимо в большинстве ситуаций, но если вы будете помнить об этом, когда планируете свои снимки, это может быть хорошей уловкой, чтобы держать себя в руках.
Во-первых, давайте посмотрим на растянутое изображение в действии. Справа анимация, показывающая растяжение, и я установил здесь рабочий пример . Практически идентичный код работает в реальном времени на домашней странице SitePoint (по очереди), но я выделил его на отдельную страницу, чтобы упростить задачу.
Как вы можете видеть, когда вы расширяете свой браузер шире, три «функциональных блока» удаляются от изображения книги, в то время как «соединительные ветви» остаются подключенными . Несмотря на то, что эффект в конечном итоге терпит неудачу при сверхшироком и очень низком разрешениях, он, безусловно, имеет дело с доступным пространством гораздо более элегантно, чем когда-либо стандартное изображение — и все это без необходимости каких-либо специальных технологий или сложных сценариев.
Метод
Конечно, браузеры всегда могли изменить размер изображения на лету. Просто они всегда выполняли такую грязную работу, поэтому мы, дизайнеры, склонны игнорировать эту способность.
Ключом к этому трюку является ограничение растяжимости частей графического изображения, которые имеют наименьшее значение — в данном случае, соединительных рычагов.
Наше изображение состоит из трех меньших перекрывающихся графиков, каждая из которых установлена в position:absolute , что просто упрощает весь процесс их перекрытия. Содержащий их оберточный DIV устанавливается в position:relative чтобы держать их внутри своего ящика.
Графика 1: Книга
Сама книга представляет собой прозрачный PNG8 и установлена left:55% — это гарантирует, что она всегда будет чуть более половины пути контейнера DIV, независимо от его ширины. Я также установил для него значение top:-1em чтобы верхний край книги высовывался из коробки. Мы вовсе не хотим, чтобы это изображение искажалось, поэтому мы даем ему естественные размеры — 139×197 пикселей.
Наконец, я обеспечил, чтобы изображение книги всегда было впереди всего остального, установив его z-index равным 99. Это позволит убедиться, что соединительные рычаги всегда исчезают за изображением книги.
Рисунок 2: Три функциональных блока
Поскольку эти промо-акции имеют продолжительность жизни всего пару недель, я выбрал здесь самый простой вариант и настроил три функциональных блока в виде одного рисунка, хотя в идеальном мире я бы составил их список.
Я хочу, чтобы это изображение оставалось с правой стороны контейнера, поэтому я расположил его right:2% .
Как и изображение книги, я переместил его в начало нашего стека ( z-index:90 ) и установил размеры изображения по умолчанию (111x160px), чтобы сделать его четким и четким.
Рисунок 3: Соединительные руки
Это, конечно, наша эластичная графика. Это не более чем прозрачный PNG8 с розоватыми пунктирными линиями. Я добавил несколько искусственных мягких теней, чтобы придать им больше глубины.
Важный момент заключается в том, чтобы сохранить этот график относительно простым и необработанным с самого начала. Если мы сделаем его немного коренастым, то растяжение его не сможет нанести ему столько вреда.
Во-первых, я расположил это left:56%, поэтому его левая сторона всегда должна располагаться позади изображения книги (которое было left:55% ), независимо от ширины страницы. Я также установил для этой графики z-индекс 85, так что он никогда не должен находиться перед книгой или коробками.
Затем я установил ширину этого соединительного изображения на width:30% . Это 30% содержащего DIV, поэтому рисунок будет растягиваться и сжиматься, как и его контейнер. Правый край графического элемента хорошо скрывается за полями функций.
Не существует волшебного метода для расчета этого процента (30%) — просто нужно немного проб и ошибок. Я установил временную границу на растянутой графике, пока настраивал ее, что помогло сделать вещи более понятными.
Как вы можете видеть, соединительные рычаги, конечно , деформируются при растяжении, но, похоже, это не наносит ущерба общему результату — по крайней мере, на мой взгляд.
Подведение итогов
Если вам нравится этот эффект, на мой взгляд, есть две проблемы, с которыми вам придется бороться. Первая проблема техническая.
IE7 рад установить ширину вашего изображения на уровне 30% при загрузке страницы, но он постоянно отказывается автоматически пересчитывать эту ширину, если вы изменяете размер окна браузера. Перезагрузка страницы сбросит ширину, но я не знаю ни одного способа заставить IE7 пересчитать ширину на лету.
Странно, но при всех других проблемах IE6 правильно масштабирует изображение, так что это явно новая ошибка.
Вторая проблема — просто найти правдоподобную ситуацию, в которой можно использовать эту технику. Я, безусловно, хотел бы увидеть любые вариации на тему, которые вы можете придумать.
Пол О’Брайен предложил исправить ошибку обновления IE7. Он пишет:
Что касается вашей статьи о растягивающихся изображениях, то исправление для IE7 — просто обернуть изображение в промежуток и применить измерения к промежутку и сделать изображение 100% шириной и высотой. Я всегда так делаю и, кажется, работает без проблем 🙂
например
div#promo-b div span#stretch { position:absolute; top:.5em; left:56%; z-index:85; width:30%; height:150px } div#promo-b div span#stretch img { width:100%; height:100%; }div#promo-b div span#stretch { position:absolute; top:.5em; left:56%; z-index:85; width:30%; height:150px } div#promo-b div span#stretch img { width:100%; height:100%; }
<span id="stretch" > <img src="http://www.sitepoint.com/images/books/design1/design1-stretch2.png" alt="" /></span>