Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.
Адаптивные изображения. Практические приемы верстки картинок. 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
🤟 Живи, а работай в свободное время! ©
Пікірлер: 891
Ох уж этот Internet Explorer, вечно с ним беда. А за видео, конечно же, жирный лайк👍👍👍
Я занимаюсь совершенно другими вещами, но ставлю лайк! За труд и бесплатное обучение! У тебя классный контент! Ты лучший!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
@_SoNicos
4 жыл бұрын
@@FreelancerLifeStyle Я присоединяюсь к Михаилу. Изложение материала великолепное. Информация сразу раскладывается по нужным полкам. Курсов видел я немало, уж поверьте. Забрёл сюда случайно. Остаюсь здесь надолго )
@user-lf3ht2ss8q
3 жыл бұрын
Совершенно верно! Хорошее видео
@velrrr
Жыл бұрын
Прив
🤟 Как тебе подача? Содержание: 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/
@FreelancerLifeStyle
4 жыл бұрын
@dmitriy Makarov стараюсь делать максимально доступно)
@FreelancerLifeStyle
4 жыл бұрын
@dmitriy Makarov ну тогда это не фриланс а удаленная работа в компании. Да, при знании языка и нужных умениях конечно можно.
@user-tu6ok5ts2f
4 жыл бұрын
Подача улучшается с каждым уроком. Параллельная демонстрация это вообще то, что доктор прописал.
@al77ex1
4 жыл бұрын
Суперовая!!!
@nionori6023
4 жыл бұрын
@@FreelancerLifeStyle Есть один вопрос, с которым object-fit не справляется... Ну или я недостаточно понимаю принцип его работы. Если у родительского элемента position:absolute, то object-fit не работает от слова совсем... Картинка так и продолжает вести себя как картинка, не заполняя область блока
Це ж треба так дохідливо уміти пояснювати. Це талант, респект та лайк!
Спасибо! За такую ценную информацию вообще не жалко деньги заплатить, а тут все бесплатно и ценность выше, чем на платных курсах! Поэтому я сам с недавних пор подписался на Женю на патреоне и других призываю. Автор, без всяких сомнений, заслужил поддержку деньгами, тем более сейчас, когда контент в Украине делать совсем трудно - но Женя продолжает делать качественные уроки! Спасибо большое за Ваши старания! Пусть у Вас лично и в Украине все будет хорошо!
Лайк, за: object-fit, не знал про это свойство, а оно очень меня выручило! Спасибо тебе за твой труд, ты крутой, чувак!!
Единственный раз когда меня попросили поставить лайк и я захотел его поставить! Лучший!
Жалко, что можно поставить, только один лайк! Благодарю от всей души!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Буду рад репостам в соц. сети!
Дякую за корисну інформацію доступною мовою!
Круто, не знал про object-fit и picture-source Божественный гайд :)
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
@user-rb8nk5zy8x
4 жыл бұрын
А я, кстати верстал макет из урока про БЕМ и долго мучился над тем блоком, где 6 картинок. А мучился потому что скачал разных размеров. И вот в этом-то месте мне и пришлось погуглить и найти это свойство. Ну а сегодня посмотрел данный видос и прямо как дежа-вю ))) Шаг за шагом как я решал проблему ). Теперь буду насиловать этот макет на адаптив )
@user-or1hy4xz8u
Жыл бұрын
А поддержка браузерами object-fit и picture-source не смущает?
@kirillriman3611
Жыл бұрын
@@user-or1hy4xz8u Оно поддерживается всеми браузерами (IE не браузер)
@user-or1hy4xz8u
Жыл бұрын
@@kirillriman3611 А если в ТЗ указано и под IE верстать ?
Качественно, полезно, информативно! Спасибо!
object-fit РЕБЯТА object-fit МАТЬ ЕГО!!!!!!!!!!! Какого хрена я не видел это видео раньше??? Спасибо Жека! Как всегда лайк!!!
Найкращий канал, найкращий Жека! Тисячу подяк Вам за вашу пряцю.
Очень интересно учиться благодаря твоим видео.Спасибо за такую возможность!)
Спасибо тебе, добрый человек, за object-position!
Давно искал такие объяснения. Спасибо!
Огромное спасибо! Всегда так четко и понятно!
Наикрутейшее видео о картинках, какое я когда-либо видела!
Спасибо, что рассказал без воды и не нужных вещей!
Очень понятное объяснение. Спасибо!!!
Бесит, что нельзя поставить лайк два раза. Ведь я же уже дважды смотрел это видео, и оба раза мне очень понравилось.
Спасибо. Очень качественный материал. И приятный стиль общения со зрителем очень. Уютная атмосфера канала.
Все очень доступно и понятно. Спасибо большое!
Лучший бро! И текст и картинка и наполнение! Спасибо!
Твои видео просто клондайк знаний по фронтенду, благодаря твоим четко структурированным видосам с отличным монтажем многим не нужно собирать информацию по крупицам. Спасибо что ты есть, мужик)
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Пересмотрел несчетное кол-во каналов за год+, как по верстке так и др. Но только тут настолько все круто и понятно и мотивация+++, что я наконец-то сверстал пару своих тренировочных макетов! Вновь поверил в себя! Мне очень трудно дается эта сфера.. ну прям ваще все туго даже самое банальное(( но я пытаюсь и не останавливаюсь!!! Спасибо Вам бесконечно огромнейшее Евгений!! Надеюсь когда-нить хватит знаний уже и выйти на фриланс наконец-то!!
@FreelancerLifeStyle
4 жыл бұрын
Супер! Все получится!
@user-pr8zg4sw6c
2 жыл бұрын
Ну как у вас дела?
@stivem9523
2 жыл бұрын
@@user-pr8zg4sw6c работаю уже
@user-fm1kf1dt3n
2 жыл бұрын
@@stivem9523 За какое время обучились?
@tishkafocovv8723
Жыл бұрын
@@stivem9523 хорош
Очень полезный материал! Спасибо!
Ты уникальный случай на ютубе!
Огромное спасибо тебе, добрый человек! Очень ценные знания представил очень просто и понятно, СПАСИБО!!!
Смотрю вас постоянно! Потрясающая подача материала! Как раз интересовала тема картинок. Спасибо огромное!!!!
Частенько выручает видос, когда забываю ♥
Просто супер канал! Дуже якісний матеріал! Дякую
З'явилась нова ціль - познайомитись з тобою особисто та поспілкуватись за кавою. Ти крутий! Спосіб донесення матеріалу - ТОП! Так тримай👍
Благодарю за контент, как раз застрял на этой теме в проекте
Остановил, поставил лайк. Хорошо, что не пропало совсем)
Десятки и сотни раз я слышал: "Поставь лайк и подпишись" и только 2-3 раза я сделал это, посчитав их достойными. И ты один из них! Спасибо!
Полезности и много, огромное спасибо! 🙂
Наглядно! Информативно! Понятно! Полезно! Спасибо!!!!!))))
Ника не нахожу полноценно времени оценить ваш канал, подписался и ставлю лайки понимая какой это труд. Спасибо
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
@brodyagaPATY
4 жыл бұрын
надо по-любому время находить, я начал программирование с его канала, для меня самый топовый))))
@danshkolnikov8258
4 жыл бұрын
@@brodyagaPATY Ну тут не программирование) (это не упрёк)
Этот канал самый лучший👍 если есть какой-то вопрос, то на этом канале будет самый развернутый ответ, а главное - без воды. Респект автору!
Жєка, в n-й раз передивляюсь твої відео-уроки! В тебе талант до викладання, ти супер-пупер! Дякую тобі за твою працю🤩
Спасибо огромное!!!Очень понятно и доступно подан материал, круто! Учусь по Вашим роликам и получаю огромное удовольствие от процесса.
наконец-то, я смогу поставить эти картинки разных размеров адекватно!)) спасибо, Вам! топовые уроки !
Ну наконец файлы урока есть, так бы всегда было :) А за урок спасибо большое, всегда на высоте!
Вы очень крутой! Храни вас бог!
Помітив за собою одну цікаву річ, тільки на твоїх відосах мені подобається фішка з лайками та підпискою. Кожного разу ставлю відос на паузу, якщо до цього ще не був поставлений лайк. Хоча у будь яких інших відосах на ютубі це дуже бісить. Так тримати, так круто розказувати про абсолютно різноманітні речі - це неймовірно! Жека, ти крутий чувак!
теперь это мой любимый канал по сss реально ты профессионал своего дела )))
Я в восторге, большое спасибо....
Спасибо! Твое видео в очередной раз и вполне ожидаемо выручило меня. :)
Очень прикольно. Теперь в следующий раз, практикуясь в вёрстке, буду пробовать юзать эти методы. Спасибо))
Спасибо, Жека, особенно за object-fit, не знал про это полезнейшее свойство)
Благодарю Вас за видео.
Спасибо тебе, хороший человек!
Чудовий відео-урок.... все чітко і детально... Величезне Вам Дякую
как только лайкнул, помехи прошли. чудны дела твои!
За picture отдельное спасибо!
Найкращий ютубер, вчитель по html, css, js. І просто крута людина!
Спасибо большое, я благодаря тебе косяки в дипломе исправил object-fit реально TOP
Спасибо за урок!
Спасибо тебе за урок.
Пушка! Не слежу за новыми свойствами, для меня это открытие)
@FreelancerLifeStyle
4 жыл бұрын
Свойства то старые просто браузеры начинают их +- поддерживать)
Это офигенно полезный урок
Автор, у тебя ТАЛАНТИЩЕ объяснять. Каждый раз по любым вопросам css/html стараюсь найти твои видео. Спасибо за твой труд! Подписан и буду рад новым видео для новичков )))
Уух, большое спасибо за ваши видео! Жаль, что я не узнала о вас раньше!
Отличный урок всё понятно и доходчиво 👍- у тебя нет права останавливаться) то как ты это делаешь уникально - лайк подписка!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо! Постараюсь!
@prostodelaytak
4 жыл бұрын
@@FreelancerLifeStyle присоединяюсь. Есть просто учителя, а есть Учителя... Вы Учитель!
Весьма познавательно. Пошел правктикаваться.
объясняете доходчиво, но что мне больше всего нравится, это то что вы прикрепляете файлы верстки к видео
Спасибо за видео. Подсвечено семейное фото на заднем фоне в начале - красивая деталь)
спасибо за Вашу работу.
Наконец-то! Ни в одной про теги picture\source я не нашёл упоминание атрибута media , а вот теперь у меня всё заработало, как надо!
спасибо за урок, весьма благодарен)
Огромное СПАСИБО!!! Для меня, драгоценный материал!!!!!!!!!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Я думал что все знал о картинках, но почему то этой инфы нигде не встретил, новинка внезапно)
Оу, хорошее свойство о котором я не знал) Спасибо! Лайк и подписка уже оформлены)
Есть одно слово от подачи информации - КАЙФ ! Спасибо за видео)!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Сижу я такой значит на работе, приходит баг от тестера - "картинки в зависимости от изменения ширины или высоты родителя сильно искажаются" и тут такой значит вспомнил, вчера вышло новое видео что то там с картинками на канале Фрилансер по жизни. Сразу мысль - "может быть там найду что мне надо а то уже все препробовал...." и о ЧУДО, свойсво ОБЖЕКТ ФИТ. Спасибо большое за полезный контент!
Ничоси! Отличные приёмы, возьму на вооружение, спасибо за интересный живой контент, Женя, мы ждем продолжения банкета! 😁
Спасибо за труд!
Жека иолодец я еще не раз возращаюсь к твоим видео и вспоминаю свойство как имено в совокупности чтоб они работали как пример это object fit и то что надо задавать width и height 100% . Спасибо за твой труд!!!
Как всегда, лучший контент! Браво!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Добрый день! Благодарю, Женя, за содержательный, полезный материал, понятное изложение, качественное видео и то, что делишься своим опытом и наработками! Успехов, дальнейшего развития, здоровья, мира и всех благ! 👍🤝🙂
Круто, круто, круто!!! Познавательно, попробую обкатать на паре учебных макетов
я человек простой, вижу годноту - ставлю лайк..
Огромное человеческое Спасибо! за твой труд. Всё четко и доходчиво!!!!
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Спасибо за видео, нашла ответ на вопрос который искала
Это просто гениальные видосы, реально!!!!!
Большое спасибо ! Как всегда - на высоте !!!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!
Дуже класно. В мене був серйозний вайб, коли дойшов до макс відс. А після слів ти що ще не підписався і тд, то аж засміявся)) Дякую
Спасибо за материал👍🏼 супер! Голова уже конечно нагружена и новая информация усваивается хуже, чем на старте. Но никогда не сдавайся😄
Весьма познавательно!
Редко ставлю лайки и подписываюсь, но данный канал клондайк)) спасибо большое за обучающие видеоролики
Отличный урок! Спасибо
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Спасибо большое за ценную информацию! Смотрится на одном дыхании)
@FreelancerLifeStyle
4 жыл бұрын
Пожалуйста!
Всегда с удовольствием ставлю лайк под каждым видео! Каждый ролик как праздник🥳
@FreelancerLifeStyle
4 жыл бұрын
Супер! Я рад!
Очень круто контент и блестящий подход😏👍👌
Очень здорово! Спасибо! Всегда после видео оставались вопросы а тут не успеваешь даже подумать о них как сразу их тебе разжевали!!!
@FreelancerLifeStyle
4 жыл бұрын
Супер, я рад)
Большое спасибо! Просто огромезное! Межконтинентальное! Межпланетное! Межгалактическое!
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Ты крут :). Спасибо за качественный контент
Спасибо за видео. Полезная информация.
@FreelancerLifeStyle
3 жыл бұрын
Пожалуйста!
Лайк за тяжелую работу и крутую подачу!
@FreelancerLifeStyle
4 жыл бұрын
Спасибо!