Тег picture в HTML. Адаптивные изображения

Рет қаралды 26,768

5 жыл бұрын

В этом видео разберем тег picture, который дает много возможностей для работы с контентными изображениями на вашем сайте.
// Ссылки =================
Основы HTML и CSS для начинающих: brainscloud.ru/landing/html-css
Материалы урока: files.brainscloud.ru/file/teg...
// О проекте =================
Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разрабокте - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд.
На сайте проекта brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания.
// Соц. сети =================
Мой ВК - odimaz
Группа BC - brainscloud
Мой Instagram: / dmitryvalak
#верстка #html #css #css3

Пікірлер: 78

@alex.zaslavskyi 4 жыл бұрын

За 10 минут все клево объяснил, а то надоела куча туториалов 10 штук по полчаса объясняют тэг picture. Спасибо, подписался.

@igorkl5167 5 ай бұрын

Всё здорово! Действительно очень доходчиво рассказали об этом способе! Хотелось бы добавить, что вот такая конструкция кода например media="(min-width: 450px) and (max-width: 600px)" тоже будет работать. Прям как в медиа запросах CSS. Это значит, что в этом диапазоне будет показываться ваше изображение. Для другого диапазона другое. Просто сколько не смотрел такого примера нигде не встречал, однако он рабочий и в определённых случаях очень удобный!

@MistrKrabs 4 жыл бұрын

Просто, понятно, качественно, полезно. Лайкос

@bohdanmarchenko 2 жыл бұрын

Огромное спасибо! Очень доступно обьяснили

@user-jv5qc6vg2b 5 жыл бұрын

Лучший, братик. 💪✋ Как обычно)

@pandaskeptic2937 5 жыл бұрын

Спасибо за полезный урок! 👍 👍 👍❤️

@BrainsCloud 5 жыл бұрын

Пожалуйста!

@JavaScriptcher 2 жыл бұрын

Полезно и очень подробно!!😎

@user-ei8ib3mq2q Жыл бұрын

Cпасибо бро очень граммотно и доходчиво объяснил!лайк подписка!

@BrainsCloud 5 жыл бұрын

Привет! Как дела? Записал новое видео для тебя!

@yaroslavzef7267 4 жыл бұрын

Норм. Как сам?

@user-el6se9xp5z 3 жыл бұрын

Здравствуйте! Спасибо вам за ваши видео! У меня вопрос - как сделать блок, с фиксированной высотой и шириной, но при этом чтобы он адаптировался как картинка с свойством width 100%?

@sultanabdulazizov835 2 жыл бұрын

Спассибо, тяжело было самому разобраться.

@Alexus1504 3 жыл бұрын

Прикольный тег!

@darktoxin1991 Жыл бұрын

То что надо. Спасибо теперь понял.

@adaewandrei3725 Жыл бұрын

спасибо!огонь!

@orcsamuro9687 Жыл бұрын

Спасибо, было полезно

@yoltart7694 3 жыл бұрын

Ты лучший 👍

@IsHardynafthardynaft 3 жыл бұрын

Спасибо. Второй день голова пухла от непонятной статьи про это в интернете.

@IsHardynafthardynaft 3 жыл бұрын

У меня сработал такой код, если это можно назвать таковым: p.s. Думаю, что когда дотянусь до изучения CSS, то нагибать картинки станет проще.

@yaroslavzef7267 4 жыл бұрын

Спасибос!

@powerrampage 2 жыл бұрын

вы использовали фотошоп для convert картинок 1x, 2x (dpi) ?

@user-ct6qd1og7x 3 жыл бұрын

А что эта за классное расширение для просмотра адаптивных экранов? можно ссылку?)

@user-ri8ow3qh7l 5 жыл бұрын

Как вы работали 4 года назад в brackets, так и продолжаете работать? А ведь появилось множество хороших редакторов, например vscode, или ide phpstorm. А вы просто консерватор)))

@bohdanmarchenko Жыл бұрын

Скажите, если браузер старый и не поддерживает SVG, будет ли в нем работать тег ?

@jangow5716 3 жыл бұрын

Здравствуйте. А классы прописывать и для img и для source одинаковые? (к примеру если у нас 2 расширения png и webp)

@BrainsCloud 3 жыл бұрын

только для img

@bigblueboar 3 жыл бұрын

Классы берутся для тега IMG

@alexeipopov3319 5 жыл бұрын

Спасибо. Почему Brackets? Сделай видео по настройке и плагинам редактора пожалуйста.

@BrainsCloud 5 жыл бұрын

А почему не он? Мне удобно.

@Beyond-the-transcendent Жыл бұрын

Теперь вопрос если к тэгу img я задаю класс , то получаю что если браузер выбирает изображение из sours то класс и стили css не подтягиваются , class="cover__users-ava" - задаёт позицию абсолют и координаты, если удалить source то всё работает

@user-cr8ey3ei1t 4 ай бұрын

- в хроме всё равно png

@mustang... Жыл бұрын

Размазывал кашу по тарелке как мог, повторяя одно и тоже, аж на 10 минут вышло, вах.

@ertargn 5 жыл бұрын

крутой плагин который показывает картинку при наведении курсор в код html/// существует ли такой плагин на visual studio code?

@BrainsCloud 5 жыл бұрын

не знаю

@Kot_off 3 жыл бұрын

Круто, ну а как мне к примеру менять картинку, если у меня при адаптиве 1920, 1024, 768, 320. ?

@bigblueboar 3 жыл бұрын

Поставить 4 тега source, и для каждого свою картинку, и свой медиа-запрос? Ну, если для каждого разрешения прямо обязательно свою картинку.

@niqwer477 Жыл бұрын

а если картинки в srcset будут разных форматов, png, jpg оно не будет работать?

@igorkl5167 5 ай бұрын

Будет!

@ldm2316 5 жыл бұрын

Автор, дайте ссылку на скачивая музыки, которая на фоне.

@BrainsCloud 5 жыл бұрын

Поищите в аудио-библиотеке ютуба, называется nimbus

@user-ri8ow3qh7l 5 жыл бұрын

Вы еще про webp забыли рассказать, его тоже можно использовать в теге picture.

@user-ri8ow3qh7l 5 жыл бұрын

Все, нашел решение kzfaq.info/get/bejne/i5dmatOivr7XaYk.html тоже у вас, спасибо вам за контент. Продолжайте в том же духе. У вас очень приятный голос и хорошая подача материала.

@bigblueboar 3 жыл бұрын

Не только webp, там куча всего. Например, еще jpg/png/svg/avif/heif. Будет загружено то, что поймет браузер.

@Frie666 4 жыл бұрын

для jpeg картинок так же?

@bigblueboar 3 жыл бұрын

Также. Только там есть еще один атрибут, указывает тип картинки. Не только png/jpg, еще webp, например, или avif

@irustv7674 4 жыл бұрын

Идеология данного тега непонятна: хорошо, можно тут сделать медиа запрос с разными картинками, а как тогда быть с остальным контентом (медиа формат для других устройств), его же придется писать в css файле. Т.е. придется разделить код под разные устройства на два или более разных места, что затруднит поддержку такого кода. В моем понимании - picture - плохое нововведение.

@bigblueboar 3 жыл бұрын

Так можно ж не использовать. Можете все писать по-старинке в CSS. Кому-то нравится, кому-то нет.

@golofaev 5 жыл бұрын

а как же быть с background-image ?

@BrainsCloud 5 жыл бұрын

А что с ним не так?

@golofaev 5 жыл бұрын

как правильно прописать правило?

@alym.aleksey 3 жыл бұрын

@@golofaev через медиазапросы

@artemkosharnyi7812 2 жыл бұрын

фул хд)))

@thekamol 5 жыл бұрын

А как вы установили телефон на браузер

@BrainsCloud 5 жыл бұрын

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

@thekamol 5 жыл бұрын

Нет, я имел виду картинок телефона

@hawaiianboi8412 5 жыл бұрын

@@thekamol f12 / toggle device toolbar / more options / show device frame. пока это работает только с айфонами до версии Х и айпадом. У меня версия хрома - 74

@bigblueboar 3 жыл бұрын

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

@varfolomeiq 4 жыл бұрын

а как делать @2x ??? у меня они получаются в плохом качестве, как все так их увеличивают?!

@BrainsCloud 4 жыл бұрын

изначально делаете большую картинку, потом ее уменьшаете в два раза

@gio2156 4 жыл бұрын

Используй svg, если это лого то тем более, логотипы ща все svg делают

@OyNice 4 жыл бұрын

Здравствуйте! Как именно его уменьшают? То есть берётся картинка кодировается да? Если кадрировать фото то как кадрировать 2x раза ? Я новичок данной сфере пока не понимаю как решать различные задачи. помогите мне.

@Frie666 4 жыл бұрын

@@OyNice нашел ответ? напиши решение плиз

@OyNice 4 жыл бұрын

@@Frie666 Посмотри это видео: kzfaq.info/get/bejne/iJ9dd5aY1d68m30.html Если хочешь уменьшить размеры фото можешь через программу paint. (Если не можешь найти программу, то берёшь нужную тебе фотографию кликаеш и нажимаешь на правую кнопку мыши). Надеюсь разберёшься. Если что пиши.

@checkTM 4 жыл бұрын

ребят не понял только как картинку готовить.

@user-zw8ri5of6u 5 жыл бұрын

Что такое ретина? (Изв. Я тупой)

@BrainsCloud 5 жыл бұрын

Дисплеи с высокой плотностью пикселей

@ertargn 5 жыл бұрын

все норм не ты один тупой

@yrka183 4 жыл бұрын

Продукция яблока

@bigblueboar 3 жыл бұрын

Это когда дисплей вроде бы размером (физически, в дюймах) таким, как все Full-HD дисплеи (1920х1080), но там разрешение больше - не помню точно, 2 или 3 тысячи по горизонтали. Чтобы, вроде как, картинки были четче и красивее.

@DartMitai 3 жыл бұрын

очень гибкий, жаль что захламляет html

@bigblueboar 3 жыл бұрын

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