Тег picture в HTML. Адаптивные изображения
ฝัง
- เผยแพร่เมื่อ 24 เม.ย. 2019
- В этом видео разберем тег 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
За 10 минут все клево объяснил, а то надоела куча туториалов 10 штук по полчаса объясняют тэг picture. Спасибо, подписался.
Всё здорово! Действительно очень доходчиво рассказали об этом способе! Хотелось бы добавить, что вот такая конструкция кода например media="(min-width: 450px) and (max-width: 600px)" тоже будет работать. Прям как в медиа запросах CSS. Это значит, что в этом диапазоне будет показываться ваше изображение. Для другого диапазона другое. Просто сколько не смотрел такого примера нигде не встречал, однако он рабочий и в определённых случаях очень удобный!
Просто, понятно, качественно, полезно. Лайкос
Огромное спасибо! Очень доступно обьяснили
Лучший, братик. 💪✋
Как обычно)
Cпасибо бро очень граммотно и доходчиво объяснил!лайк подписка!
Спасибо за полезный урок! 👍 👍 👍❤️
Пожалуйста!
Полезно и очень подробно!!😎
Спассибо, тяжело было самому разобраться.
То что надо. Спасибо теперь понял.
Спасибо, было полезно
Привет! Как дела? Записал новое видео для тебя!
Норм. Как сам?
Здравствуйте! Спасибо вам за ваши видео! У меня вопрос - как сделать блок, с фиксированной высотой и шириной, но при этом чтобы он адаптировался как картинка с свойством width 100%?
Прикольный тег!
спасибо!огонь!
Спасибо. Второй день голова пухла от непонятной статьи про это в интернете.
У меня сработал такой код, если это можно назвать таковым:
p.s. Думаю, что когда дотянусь до изучения CSS, то нагибать картинки станет проще.
Ты лучший 👍
Спасибос!
Как вы работали 4 года назад в brackets, так и продолжаете работать?
А ведь появилось множество хороших редакторов, например vscode, или ide phpstorm.
А вы просто консерватор)))
вы использовали фотошоп для convert картинок 1x, 2x (dpi) ?
А что эта за классное расширение для просмотра адаптивных экранов? можно ссылку?)
Спасибо. Почему Brackets? Сделай видео по настройке и плагинам редактора пожалуйста.
А почему не он? Мне удобно.
Скажите, если браузер старый и не поддерживает SVG, будет ли в нем работать тег ?
- в хроме всё равно png
Теперь вопрос если к тэгу img я задаю класс , то получаю что если браузер выбирает изображение из sours то класс и стили css не подтягиваются ,
class="cover__users-ava" - задаёт позицию абсолют и координаты, если удалить source то всё работает
Здравствуйте. А классы прописывать и для img и для source одинаковые? (к примеру если у нас 2 расширения png и webp)
только для img
Классы берутся для тега IMG
Вы еще про webp забыли рассказать, его тоже можно использовать в теге picture.
Все, нашел решение th-cam.com/video/U167pqYXs9U/w-d-xo.html тоже у вас, спасибо вам за контент. Продолжайте в том же духе. У вас очень приятный голос и хорошая подача материала.
Не только webp, там куча всего. Например, еще jpg/png/svg/avif/heif. Будет загружено то, что поймет браузер.
крутой плагин который показывает картинку при наведении курсор в код html/// существует ли такой плагин на visual studio code?
не знаю
Круто, ну а как мне к примеру менять картинку, если у меня при адаптиве 1920, 1024, 768, 320. ?
Поставить 4 тега source, и для каждого свою картинку, и свой медиа-запрос? Ну, если для каждого разрешения прямо обязательно свою картинку.
Размазывал кашу по тарелке как мог, повторяя одно и тоже, аж на 10 минут вышло, вах.
Автор, дайте ссылку на скачивая музыки, которая на фоне.
Поищите в аудио-библиотеке ютуба, называется nimbus
Идеология данного тега непонятна: хорошо, можно тут сделать медиа запрос с разными картинками, а как тогда быть с остальным контентом (медиа формат для других устройств), его же придется писать в css файле. Т.е. придется разделить код под разные устройства на два или более разных места, что затруднит поддержку такого кода. В моем понимании - picture - плохое нововведение.
Так можно ж не использовать. Можете все писать по-старинке в CSS. Кому-то нравится, кому-то нет.
а если картинки в srcset будут разных форматов, png, jpg оно не будет работать?
Будет!
фул хд)))
для jpeg картинок так же?
Также. Только там есть еще один атрибут, указывает тип картинки. Не только png/jpg, еще webp, например, или avif
а как же быть с background-image ?
А что с ним не так?
как правильно прописать правило?
@@golofaev через медиазапросы
А как вы установили телефон на браузер
это эмулятор, встроенный в браузер хром, нажмите F12 и в левом верхнем углу открывшегося окна есть кнопка с изображением девайсов
Нет, я имел виду картинок телефона
@@thekamol f12 / toggle device toolbar / more options / show device frame. пока это работает только с айфонами до версии Х и айпадом. У меня версия хрома - 74
В хроме можно эмулировать загрузку сайта на мобильных устройствах. Конечно не стопроцентно точно, но для разработки полезно.
а как делать @2x ??? у меня они получаются в плохом качестве, как все так их увеличивают?!
изначально делаете большую картинку, потом ее уменьшаете в два раза
Используй svg, если это лого то тем более, логотипы ща все svg делают
Здравствуйте!
Как именно его уменьшают?
То есть берётся картинка кодировается да? Если кадрировать фото то как кадрировать 2x раза ?
Я новичок данной сфере пока не понимаю как решать различные задачи.
помогите мне.
@@OyNice нашел ответ? напиши решение плиз
@@Frie666
Посмотри это видео: th-cam.com/video/R9-D3gpxXkI/w-d-xo.html
Если хочешь уменьшить размеры фото можешь через программу paint.
(Если не можешь найти программу, то берёшь нужную тебе фотографию кликаеш и нажимаешь на правую кнопку мыши).
Надеюсь разберёшься.
Если что пиши.
ребят не понял только как картинку готовить.
Что такое ретина? (Изв. Я тупой)
Дисплеи с высокой плотностью пикселей
все норм не ты один тупой
Продукция яблока
Это когда дисплей вроде бы размером (физически, в дюймах) таким, как все Full-HD дисплеи (1920х1080), но там разрешение больше - не помню точно, 2 или 3 тысячи по горизонтали. Чтобы, вроде как, картинки были четче и красивее.
очень гибкий, жаль что захламляет html
Тут с какой стороны посмотреть. Тегов - больше, да. Но это решение проблемы. А без этого тега пришлось бы писать еще гораздо больше. А избавиться от проблемы не выйдет - не заставишь же производителей делать все девайсы с одним и тем же разрешением.
тег picture создает ненужные DOM узлы. Можно без него обойтись
Например? Как?
А что за прикол?
Ведь плохо же в html писать адаптив!
Это же его захламляет
А если браузер не поддерживает тег пикче? Че делать
Обнови браузер или пиши через CSS