Адаптивные изображения на сайте
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2020
- Привет!
Этим видео я открываю мини-цикл по адаптивной верстке сайта. В нем мы рассмотрим, как верстать сайты адаптивно, а в этом видео я рассказываю, как легко сделать изображения адаптивными, подстраивающимися под устройство.
В следующих видео будет про адаптивное меню, верстка сайта на vw, а так же просто практика адаптивной верстки.
• Верстка сайта с нуля д... - марафон верстки
• Лучший слайдер для сай... - слайдер на мобильных устройствах
• Как натянуть верстку н... - про то, какие проблемы бывают с натяжкой на WordPress
clck.ru/PbZCJ - исходники видео на GitHub
Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка.
Понравилось? clck.ru/Gr9Ec
Моя страница вконтакте: maxdenaro
Мой блог: blog.maxgraph.ru
Мой сайт: maxgraph.ru
Канал в телеграм: teleg.run/maxgraph
Чат для верстальщиков: teleg.run/maxgraph_chat
#обучение #адаптивнаяверстка #изображения
Спасибо за ёмкость и полезность ;)
Спасибо огромное, понятнее прям стало!
Пожалуйста)
всё актуально и легкое объяснение
Полезное видео, пригодится!
Рад помочь )
полезный видос
классно объясняешь прям без лишней инфы только по делу подписка____
Спасибо)
@@maxgraph хотел бы задать вопрос, будите ли вы переносить видео контент из ютуба на какую-нибудь иную площадку в случай блокировки ютуба?
Скорее всего
Макс, что думаете по поводу подготовки дополнительных изображений для ретина-дисплеев? Вы делаете так? Т.е. для разных экранов - разные изображения.
Медиа с помощью "(min-resolution:96dpi) and (max-resolution:264dpi)" (пример)...
Для фоновых картинок не вижу смысла. Для контента через picture - да
@@maxgraph ? как-то у вас мало инфы об этом, от слова очень!
Может где и проскакивало в видео, но точно не помню...
Видел у вас в одном из видео, что вы используете какую-то свою сетку, было бы интересно узнать, как строить сетки на flexbox, не хуже boostrapoвских :), если реально, конечно.
Это в каком?)
@@maxgraph Видео про адаптивность, может показалось :D
а, ну там все совсем просто) но да, видео можно будет сделать, но это ближе к концу июля
@@maxgraph Спасибо! Очень нравится ваш контент, не понятно почему так мало подписчиков :), все очень качественно и по делу
Спасибо, растут потихоньку)
У меня вопрос по поводу picture. Если у меня, допустим, в тегах source указаны в первом 1.jpg и в следующем 1.png, но на сервере нет картинки 1.jpg, будет ли он грузить png-картинку?
Если вы про одну и ту же ширину - будет
Почему-то не работает. Вы не могли бы взглянуть? jsfiddle.net/f85nsk2b/3/
Напишите в личку в вк. Ближе к вечеру смогу)
нормально что я для обертки контейнера делаю фикс ширину, иногда высоту, а само изображение: height 100%, width 100% и когда я ставлю любую картинку она отлично подтходит
Ну как вариант
Интересно, как сделать картинку адаптивной, которая заданная например как фон через bg?
Точно так же, но с использованием свойств бэкграунд
@@maxgraph окей, спасибо)
И ещё вопрос а как таким же образом работать с бэкграундом ? )) Чтоб грузило webp и менялось в зависимости от размера экрана ...тут же нет уже никаких picture , для бекгрунда не могу нагуглить ничего подобного, может не там ищу хз ...но пока вопрос вопросов , просто по факту очень ведь часто картинка грузится не тегом, а бэком. И ещё как в бэкграунде оптимизировать ретину ))
Можно использовать image-set, но не во всех браузерах будет работать :)
А чему именно надо указывать max-width 100% и object-fit...picture ? Я имею в виду у меня в теге picture может и чаще всего так и есть куча соурсов , как мне сделать чтоб каждому изображению в момент подгрузки срабатывало object-fit, ведь ? На соурсв вообще работает этом свойство ? Вот тут путаница есть. Или соурсы не надо трогать и просто? Обычно я делал как , оьорачивал картинку , обёртке давал размеры, а картинке внутри нее задавал w100% h100% и object fit, а как работать так же с picture, в котором куча вариантов медиа + ретина + webp
Идея в том , браузер грузит webp если может , на него работает object-fit, я сужаю экран , картинка плавно масштабируется , но когда приближаюсь к брейк поинту , картинка меняется , браузер снова если может грузит web, и уже на новую картинку работает дальше object-fit, я сужаю ещё , она масштабируется плавно, брецкпоинт- грузит новую , и так до 320px.. как прописать picture то я знаю , а как и чему задавать тут max-width и object-fit не пойму, куча соурсов с сетами, и чтоб на все это работало в том числе и если ьращуер не полгрущил webp на обычные чтоб же тоже продолжало работать ...бррррр...)))
source - лишь обертка для пути для изображения. Если внимательно в девтулсе глянуть, видно, что то что прописано в source - просто вставляется в img при определенных условиях. т.е., стилизовать Picture или source смысла нет, только img.
Насчет object-fit - не вижу с этим проблем, если указать cover, как правильно любая картинка будет смотреться.
Ну а max-width для того, чтобы картинка размером 1000 пикселей не вылезла из блока размером 500 пикселей)
@@maxgraph спасибо )) щас протещу)
Хм звук есть видео нет, а превью youtube перемотки отображется
UPD в chrome нет в FireFox есть...
Странно, ну это скорее ютуб, исходник то работает)
А как же адаптив для ретина дисплеев?
Так это не адаптив, это именно настройка для ретины :) А тема видео - про адаптивные изображения.
Про ретину будет отдельно.
MaxGraph - cайты как страсть буду ждать)