Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.
HTML-код
- Опубликовано: 2 июн 2024
- Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture. Продолжаем изучать работу с изображениями и сегодня поговорим о важной теме - адаптив изображений. Изучим CSS свойства object-fit и object-position и HTML теги picture и source. Рассмотрим практические примеры правильного адаптива картинок в разных ситуациях.
💪 Файлы урока - fls.guru/files/tutorials/imag...
👉 Форматы изображений для веб-разработки - • Форматы изображений в ...
👉 Урок CSS background - • CSS свойство BACKGROUN...
👉 Шпагралка CSS background - fls.guru/cssbackground.html
👉 Метод "IBG" - fls.guru/ibg.html
👉 Справочник типов файлов - ru.wikipedia.org/wiki/%D0%A1%...
Содержание:
00:00 - Вступление
01:10 - Метод max-width
06:23 - CSS object-fit и object-position
14:13 - HTML тег picture
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©
🤟 Как тебе подача?
Содержание:
00:00 - Вступление
01:10 - Метод max-width
06:23 - CSS object-fit и object-position
14:13 - HTML тег picture
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
@dmitriy Makarov стараюсь делать максимально доступно)
@dmitriy Makarov ну тогда это не фриланс а удаленная работа в компании. Да, при знании языка и нужных умениях конечно можно.
Подача улучшается с каждым уроком. Параллельная демонстрация это вообще то, что доктор прописал.
Суперовая!!!
@@FreelancerLifeStyle Есть один вопрос, с которым object-fit не справляется... Ну или я недостаточно понимаю принцип его работы.
Если у родительского элемента position:absolute, то object-fit не работает от слова совсем... Картинка так и продолжает вести себя как картинка, не заполняя область блока
Спасибо! За такую ценную информацию вообще не жалко деньги заплатить, а тут все бесплатно и ценность выше, чем на платных курсах! Поэтому я сам с недавних пор подписался на Женю на патреоне и других призываю. Автор, без всяких сомнений, заслужил поддержку деньгами, тем более сейчас, когда контент в Украине делать совсем трудно - но Женя продолжает делать качественные уроки! Спасибо большое за Ваши старания! Пусть у Вас лично и в Украине все будет хорошо!
Це ж треба так дохідливо уміти пояснювати. Це талант, респект та лайк!
Ох уж этот Internet Explorer, вечно с ним беда.
А за видео, конечно же, жирный лайк👍👍👍
Я занимаюсь совершенно другими вещами, но ставлю лайк! За труд и бесплатное обучение! У тебя классный контент! Ты лучший!
Спасибо!
@@FreelancerLifeStyle Я присоединяюсь к Михаилу. Изложение материала великолепное. Информация сразу раскладывается по нужным полкам. Курсов видел я немало, уж поверьте. Забрёл сюда случайно. Остаюсь здесь надолго )
Совершенно верно! Хорошее видео
Прив
Жалко, что можно поставить, только один лайк! Благодарю от всей души!
Спасибо! Буду рад репостам в соц. сети!
Помітив за собою одну цікаву річ, тільки на твоїх відосах мені подобається фішка з лайками та підпискою. Кожного разу ставлю відос на паузу, якщо до цього ще не був поставлений лайк. Хоча у будь яких інших відосах на ютубі це дуже бісить. Так тримати, так круто розказувати про абсолютно різноманітні речі - це неймовірно! Жека, ти крутий чувак!
Бесит, что нельзя поставить лайк два раза. Ведь я же уже дважды смотрел это видео, и оба раза мне очень понравилось.
Лайк, за: object-fit, не знал про это свойство, а оно очень меня выручило! Спасибо тебе за твой труд, ты крутой, чувак!!
З'явилась нова ціль - познайомитись з тобою особисто та поспілкуватись за кавою. Ти крутий! Спосіб донесення матеріалу - ТОП! Так тримай👍
Найкращий канал, найкращий Жека! Тисячу подяк Вам за вашу пряцю.
Единственный раз когда меня попросили поставить лайк и я захотел его поставить! Лучший!
Круто, не знал про object-fit и picture-source
Божественный гайд :)
Пожалуйста!
А я, кстати верстал макет из урока про БЕМ и долго мучился над тем блоком, где 6 картинок. А мучился потому что скачал разных размеров. И вот в этом-то месте мне и пришлось погуглить и найти это свойство. Ну а сегодня посмотрел данный видос и прямо как дежа-вю ))) Шаг за шагом как я решал проблему ). Теперь буду насиловать этот макет на адаптив )
А поддержка браузерами object-fit и picture-source не смущает?
@@user-or1hy4xz8u Оно поддерживается всеми браузерами (IE не браузер)
@@kirillriman3611 А если в ТЗ указано и под IE верстать ?
Жєка, в n-й раз передивляюсь твої відео-уроки! В тебе талант до викладання, ти супер-пупер! Дякую тобі за твою працю🤩
Дякую за корисну інформацію доступною мовою!
Качественно, полезно, информативно! Спасибо!
Пересмотрел несчетное кол-во каналов за год+, как по верстке так и др. Но только тут настолько все круто и понятно и мотивация+++, что я наконец-то сверстал пару своих тренировочных макетов! Вновь поверил в себя! Мне очень трудно дается эта сфера.. ну прям ваще все туго даже самое банальное(( но я пытаюсь и не останавливаюсь!!! Спасибо Вам бесконечно огромнейшее Евгений!! Надеюсь когда-нить хватит знаний уже и выйти на фриланс наконец-то!!
Супер! Все получится!
Ну как у вас дела?
@@user-pr8zg4sw6c работаю уже
@@stivem9523 За какое время обучились?
@@stivem9523 хорош
Спасибо тебе, добрый человек, за object-position!
Наикрутейшее видео о картинках, какое я когда-либо видела!
object-fit РЕБЯТА object-fit МАТЬ ЕГО!!!!!!!!!!! Какого хрена я не видел это видео раньше??? Спасибо Жека! Как всегда лайк!!!
Спасибо. Очень качественный материал. И приятный стиль общения со зрителем очень. Уютная атмосфера канала.
Очень интересно учиться благодаря твоим видео.Спасибо за такую возможность!)
Огромное спасибо тебе, добрый человек! Очень ценные знания представил очень просто и понятно, СПАСИБО!!!
Твои видео просто клондайк знаний по фронтенду, благодаря твоим четко структурированным видосам с отличным монтажем многим не нужно собирать информацию по крупицам. Спасибо что ты есть, мужик)
Пожалуйста!
Огромное спасибо! Всегда так четко и понятно!
Ты уникальный случай на ютубе!
Лучший бро! И текст и картинка и наполнение! Спасибо!
Ника не нахожу полноценно времени оценить ваш канал, подписался и ставлю лайки понимая какой это труд. Спасибо
Спасибо!
надо по-любому время находить, я начал программирование с его канала, для меня самый топовый))))
@@brodyagaPATY Ну тут не программирование) (это не упрёк)
Все очень доступно и понятно. Спасибо большое!
Очень понятное объяснение. Спасибо!!!
Спасибо, что рассказал без воды и не нужных вещей!
Благодарю Вас за видео.
Просто супер канал! Дуже якісний матеріал! Дякую
Давно искал такие объяснения. Спасибо!
Смотрю вас постоянно! Потрясающая подача материала! Как раз интересовала тема картинок. Спасибо огромное!!!!
Спасибо огромное!!!Очень понятно и доступно подан материал, круто! Учусь по Вашим роликам и получаю огромное удовольствие от процесса.
Дякуємо за відео, дизайнеру дуже важливо розуміти, що роблять із його макетом після дизайну.
Очень полезный материал! Спасибо!
Полезности и много, огромное спасибо! 🙂
Остановил, поставил лайк. Хорошо, что не пропало совсем)
Дуже класно. В мене був серйозний вайб, коли дойшов до макс відс. А після слів ти що ще не підписався і тд, то аж засміявся)) Дякую
Ну наконец файлы урока есть, так бы всегда было :) А за урок спасибо большое, всегда на высоте!
Привет из Днепра!) Подача супер!) Буквально 2 недели назад я толком нифига не мог наверстать с нуля, только мог править существующую верстку и то не то чтобы кардинально. После просмотра плейлиста до этого видоса, сейчас без особых усилий наверстал макет тестового задания, причем лол в том, что выслали мне не макет а просто jpg, пришлось на глаз делать, но вышло неплохо как по мне! Спасибо, Женя, ты красавчик!))
Пушка! Не слежу за новыми свойствами, для меня это открытие)
Свойства то старые просто браузеры начинают их +- поддерживать)
За picture отдельное спасибо!
Частенько выручает видос, когда забываю ♥
Я в восторге, большое спасибо....
Спасибо за урок!
Наглядно! Информативно! Понятно! Полезно!
Спасибо!!!!!))))
Сижу я такой значит на работе, приходит баг от тестера - "картинки в зависимости от изменения ширины или высоты родителя сильно искажаются" и тут такой значит вспомнил, вчера вышло новое видео что то там с картинками на канале Фрилансер по жизни. Сразу мысль - "может быть там найду что мне надо а то уже все препробовал...." и о ЧУДО, свойсво ОБЖЕКТ ФИТ. Спасибо большое за полезный контент!
Найкращий ютубер, вчитель по html, css, js. І просто крута людина!
Автор, у тебя ТАЛАНТИЩЕ объяснять. Каждый раз по любым вопросам css/html стараюсь найти твои видео. Спасибо за твой труд! Подписан и буду рад новым видео для новичков )))
теперь это мой любимый канал по сss реально ты профессионал своего дела )))
Спасибо большое, я благодаря тебе косяки в дипломе исправил object-fit реально TOP
Десятки и сотни раз я слышал: "Поставь лайк и подпишись" и только 2-3 раза я сделал это, посчитав их достойными. И ты один из них! Спасибо!
Благодарю за контент, как раз застрял на этой теме в проекте
Спасибо тебе за урок.
Отличный урок всё понятно и доходчиво 👍- у тебя нет права останавливаться) то как ты это делаешь уникально - лайк подписка!
Спасибо! Постараюсь!
@@FreelancerLifeStyle присоединяюсь. Есть просто учителя, а есть Учителя... Вы Учитель!
Оу, хорошее свойство о котором я не знал) Спасибо! Лайк и подписка уже оформлены)
Весьма познавательно. Пошел правктикаваться.
Чудовий відео-урок.... все чітко і детально... Величезне Вам Дякую
Как всегда, лучший контент! Браво!
Спасибо!
наконец-то, я смогу поставить эти картинки разных размеров адекватно!)) спасибо, Вам!
топовые уроки !
я человек простой, вижу годноту - ставлю лайк..
Этот канал самый лучший👍 если есть какой-то вопрос, то на этом канале будет самый развернутый ответ, а главное - без воды. Респект автору!
Всегда с удовольствием ставлю лайк под каждым видео! Каждый ролик как праздник🥳
Супер! Я рад!
Вы очень крутой! Храни вас бог!
Весьма познавательно!
Спасибо! Твое видео в очередной раз и вполне ожидаемо выручило меня. :)
Очень прикольно. Теперь в следующий раз, практикуясь в вёрстке, буду пробовать юзать эти методы. Спасибо))
Есть одно слово от подачи информации - КАЙФ !
Спасибо за видео)!
Пожалуйста!
Это офигенно полезный урок
Спасибо тебе, хороший человек!
2:47 я так испугался, что заставил жену и детей тоже подписаться на канал и поставить лайки)))
Ахах
Огромное человеческое Спасибо! за твой труд. Всё четко и доходчиво!!!!
Пожалуйста!
как только лайкнул, помехи прошли. чудны дела твои!
Огромное СПАСИБО!!!
Для меня, драгоценный материал!!!!!!!!!!
Пожалуйста!
Наконец-то! Ни в одной про теги picture\source я не нашёл упоминание атрибута media , а вот теперь у меня всё заработало, как надо!
Спасибо за видео, нашла ответ на вопрос который искала
Спасибо, Жека, особенно за object-fit, не знал про это полезнейшее свойство)
Жека привет✌ благодарю за контент,ты как всегда просто и понятно разгоняешь темы фронта,как будущий разраб ростущий на твоих видосах,заметил на 2.50 м.опечатку '' В карточках (три колоки)" вместо "колонки" пофикси плиз,не критично но как бы в разработке каждая буква,каждая скобка или точка имеет вес)))Спасибо что ты у нас есть,здоровья тебе и мирного неба,респектую😉
Добрый день! Благодарю, Женя, за содержательный, полезный материал, понятное изложение, качественное видео и то, что делишься своим опытом и наработками! Успехов, дальнейшего развития, здоровья, мира и всех благ! 👍🤝🙂
спасибо за Вашу работу.
Большое спасибо ! Как всегда - на высоте !!!
Спасибо!
объясняете доходчиво, но что мне больше всего нравится, это то что вы прикрепляете файлы верстки к видео
Спасибо тебе за твой труд, очень доходчивые объяснения, главное не бросай канал у тебя мега крутой контент.
Спасибо!
Отлично, взял на заметку пару приемов!) Теперь у меня с изображениями будет куда меньше проблем! Спасибо в очередной раз!)
Пожалуйста!
Спасибо за труд!
Очень здорово! Спасибо! Всегда после видео оставались вопросы а тут не успеваешь даже подумать о них как сразу их тебе разжевали!!!
Супер, я рад)
Дякую за корисну інформацію
Жека иолодец я еще не раз возращаюсь к твоим видео и вспоминаю свойство как имено в совокупности чтоб они работали как пример это object fit и то что надо задавать width и height 100% . Спасибо за твой труд!!!
Спасибо, большое! Давно ждал.
Пожалуйста!
Спасибо большое за ценную информацию! Смотрится на одном дыхании)
Пожалуйста!
Круто, круто, круто!!! Познавательно, попробую обкатать на паре учебных макетов
Спасибо за видео. Подсвечено семейное фото на заднем фоне в начале - красивая деталь)
Спасибо, Вы мне помогли.
Супер! В первый раз посмотрела - ни фига не поняла. А после стрима по верстке для новичков, где используется класс .ibg, вернулась к этому видео, и теперь все понятно. СПАСИБО!
Отличный урок! Спасибо
Пожалуйста!
спасибо за урок, весьма благодарен)
Ничоси! Отличные приёмы, возьму на вооружение, спасибо за интересный живой контент, Женя, мы ждем продолжения банкета! 😁