» » » Правильное использование тега «picture» для растягивающих изображений (HTML5)

 

Правильное использование тега «picture» для растягивающих изображений (HTML5)

Автор: admin от 21-05-2014, 00:08, посмотрело: 828

Изображения, как известно, один из самых сложных аспектов для растягивающего веб-дизайна. Сегодня мы рассмотрим, как правильно использовать элемент именно в таком дизайне.

Итак, первая проблема


Дни фиксированной ширины и точных пикселей для веб-дизайна позади и это хорошо. В наши дни широкоэкранных мониторов, интернет-телевизоров, планшетов разных размеров и смартфонов множество, от 320px до 7680px и больше в ширину. Каждый проект будет страдать если не будет автоматически подстраиваться под эти размеры.

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

Так что же нам делать?

Текущий, один из лучших способов


Как правило, вы найдете следующее CSS строки в любом растягивающем сайте:
img {
    max-width: 100%;
    height: auto;
}

В этом коде используется свойство max-width: 100%; указания которого обеспечит, что изображения никогда не выходят за пределы ширины родительского контейнера. Если родительский контейнер сжимается меньше ширины изображения, изображение будет сворачивать вместе с ней. Свойство height: auto; обеспечит нам правильное соотношение сторон изображения сохраняя исходное.

Правильное использование тега «picture» для растягивающих изображений (HTML5)
Одно изображения подходит под любую ширину

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

Новое решения


это новый элемент, который стал частью HTML5.
Это сделает процесс размещения отзывчивых изображения до скорости с тем, как нынешние Picturefill 2.0 разработанный Filament Group.
Правильное использование тега «picture» для растягивающих изображений (HTML5)
После загрузки файла picturefill.js в проект, вам остается просто добавить его в главную часть вашего сайта:
<script src="picturefill.js"></script>

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

При этом сценарий загрузки элемента будет работать, как я объяснил, только с несколькими ограничениями.

Полезные ссылки


  • Узнать больше о Picturefill 2.0 и загрузить его для вашего проекта можете на странице Picturefill

  • Получить полную информацию о элемента можете на responsiveimages.org.


Попробуйте в вашем проекте сегодня!

Источник: Хабрахабр

Категория: Программирование » Веб-разработка

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

Добавление комментария

Имя:*
E-Mail:
Комментарий:
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите два слова, показанных на изображении: *