Адаптивные изображения на сайте

[@webcherkasov8039]

Спасибо огромное, понятнее прям стало!

[@maxgraph]

Пожалуйста)

[@RomanKhassazhirov]

Спасибо за ёмкость и полезность ;)

[@Murlack]

классно объясняешь прям без лишней инфы только по делу подписка____

[@maxgraph]

Спасибо)

[@Murlack]

@@maxgraph хотел бы задать вопрос, будите ли вы переносить видео контент из ютуба на какую-нибудь иную площадку в случай блокировки ютуба?

[@maxgraph]

Скорее всего

[@alexandrgusletsov2567]

всё актуально и легкое объяснение

[@summersbyy]

Полезное видео, пригодится!

[@maxgraph]

Рад помочь )

[@detro1821]

нормально что я для обертки контейнера делаю фикс ширину, иногда высоту, а само изображение: height 100%, width 100% и когда я ставлю любую картинку она отлично подтходит

[@maxgraph]

Ну как вариант

[@ДмитрийНормов-ю6ц]

Макс, что думаете по поводу подготовки дополнительных изображений для ретина-дисплеев? Вы делаете так? Т.е. для разных экранов - разные изображения. Медиа с помощью "(min-resolution:96dpi) and (max-resolution:264dpi)" (пример)...

[@maxgraph]

Для фоновых картинок не вижу смысла. Для контента через picture - да

[@ДмитрийНормов-ю6ц]

@@maxgraph ? как-то у вас мало инфы об этом, от слова очень! Может где и проскакивало в видео, но точно не помню...

[@X1N06]

А чему именно надо указывать 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 на обычные чтоб же тоже продолжало работать ...бррррр...)))

[@maxgraph]

source - лишь обертка для пути для изображения. Если внимательно в девтулсе глянуть, видно, что то что прописано в source - просто вставляется в img при определенных условиях. т.е., стилизовать Picture или source смысла нет, только img. Насчет object-fit - не вижу с этим проблем, если указать cover, как правильно любая картинка будет смотреться. Ну а max-width для того, чтобы картинка размером 1000 пикселей не вылезла из блока размером 500 пикселей)

[@X1N06]

@@maxgraph спасибо )) щас протещу)

[@kontorasb2754]

полезный видос

[@X1N06]

И ещё вопрос а как таким же образом работать с бэкграундом ? )) Чтоб грузило webp и менялось в зависимости от размера экрана ...тут же нет уже никаких picture , для бекгрунда не могу нагуглить ничего подобного, может не там ищу хз ...но пока вопрос вопросов , просто по факту очень ведь часто картинка грузится не тегом, а бэком. И ещё как в бэкграунде оптимизировать ретину ))

[@maxgraph]

Можно использовать image-set, но не во всех браузерах будет работать :)

[@oloCAKEolo]

Видел у вас в одном из видео, что вы используете какую-то свою сетку, было бы интересно узнать, как строить сетки на flexbox, не хуже boostrapoвских :), если реально, конечно.

[@maxgraph]

Это в каком?)

[@oloCAKEolo]

@@maxgraph Видео про адаптивность, может показалось :D

[@maxgraph]

а, ну там все совсем просто) но да, видео можно будет сделать, но это ближе к концу июля

[@oloCAKEolo]

@@maxgraph Спасибо! Очень нравится ваш контент, не понятно почему так мало подписчиков :), все очень качественно и по делу

[@maxgraph]

Спасибо, растут потихоньку)

[@Mr-in8km]

Интересно, как сделать картинку адаптивной, которая заданная например как фон через bg?

[@maxgraph]

Точно так же, но с использованием свойств бэкграунд

[@Mr-in8km]

@@maxgraph окей, спасибо)

[@alexr6829]

А как же адаптив для ретина дисплеев?

[@maxgraph]

Так это не адаптив, это именно настройка для ретины :) А тема видео - про адаптивные изображения. Про ретину будет отдельно.

[@alexr6829]

MaxGraph - cайты как страсть буду ждать)

[@ОлегАлбаут]

У меня вопрос по поводу picture. Если у меня, допустим, в тегах source указаны в первом 1.jpg и в следующем 1.png, но на сервере нет картинки 1.jpg, будет ли он грузить png-картинку?

[@maxgraph]

Если вы про одну и ту же ширину - будет

[@ОлегАлбаут]

Почему-то не работает. Вы не могли бы взглянуть? jsfiddle.net/f85nsk2b/3/

[@maxgraph]

Напишите в личку в вк. Ближе к вечеру смогу)

[@truedivan]

Хм звук есть видео нет, а превью youtube перемотки отображется UPD в chrome нет в FireFox есть...

[@maxgraph]

Странно, ну это скорее ютуб, исходник то работает)