Гибкие изображения

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

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

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

Обратите внимание, что max-width не поддерживается в IE , но эффективно решит проблему использования некоторых стилей.

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

Группы изображений

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

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

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

Эта техника полностью поддерживается в современных браузерах, таких как IE8 +, Chrome, Safari, Opera, а также на мобильных устройствах, которые используют те же самые браузеры (iPad, iPhone и т.д.). В интересах экономии пространства в старых браузерах и Firefox она не действует.


Пример текстов для продвижения: Слова из песен стас михайлов http://www.eg.ru. . Завалинка просмотр темы куплю ибп. . Все компании Новосибирска - продвижение сайта Новосибирск.

Создание и продвижение сайтов в поисковых системах. Дизайн. Телефон (383) 286-20-83 © 2008-2011. Компания "Штальбер".
AMCMS
Работает на: Amiro CMS