Russian (Pусский) translation by Natasha Zyrianova (you can also view the original English article)
Безусловно, все мы хотим, чтобы наши изображения отображались на разных девайсах в самом лучшем качестве и оптимального размера. Но здесь легче сказать, чем сделать. Из этого видео вы узнаете, как использовать элемент picture
для создания адаптивных изображений.
Сначала я объясню, как работает элемент picture
, а затем приведу пример использования его для изображений, которые не только меняют размер, но и обрезаются по мере уменьшения размера экрана. Также я расскажу о том, как это влияет на производительность.
Смотреть урок
Посмотрите полный курс
Существует множество различных способ создания адаптивных изображений, но некоторые из них имеют свои минусы, например, ограниченная поддержка браузера.
Из полного курса Понимание адаптивных изображений вы узнаете всё, что нужно для работы с ними. Мы расскажем о том, что они из себя представляют и какое отношение имеют к адаптивному веб-дизайну. Кроме того, мы обсудим лучшие способы работы с адаптивными изображениями.
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post