Адаптивные изображения. Практические приемы верстки картинок. CSS object-fit HTML picture.
ฝัง
- เผยแพร่เมื่อ 22 พ.ค. 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 верстать ?
Десятки и сотни раз я слышал: "Поставь лайк и подпишись" и только 2-3 раза я сделал это, посчитав их достойными. И ты один из них! Спасибо!
Ника не нахожу полноценно времени оценить ваш канал, подписался и ставлю лайки понимая какой это труд. Спасибо
Спасибо!
надо по-любому время находить, я начал программирование с его канала, для меня самый топовый))))
@@brodyagaPATY Ну тут не программирование) (это не упрёк)
Смотрю вас постоянно! Потрясающая подача материала! Как раз интересовала тема картинок. Спасибо огромное!!!!
Найкращий канал, найкращий Жека! Тисячу подяк Вам за вашу пряцю.
Помітив за собою одну цікаву річ, тільки на твоїх відосах мені подобається фішка з лайками та підпискою. Кожного разу ставлю відос на паузу, якщо до цього ще не був поставлений лайк. Хоча у будь яких інших відосах на ютубі це дуже бісить. Так тримати, так круто розказувати про абсолютно різноманітні речі - це неймовірно! Жека, ти крутий чувак!
Спасибо. Очень качественный материал. И приятный стиль общения со зрителем очень. Уютная атмосфера канала.
Жєка, в n-й раз передивляюсь твої відео-уроки! В тебе талант до викладання, ти супер-пупер! Дякую тобі за твою працю🤩
Пересмотрел несчетное кол-во каналов за год+, как по верстке так и др. Но только тут настолько все круто и понятно и мотивация+++, что я наконец-то сверстал пару своих тренировочных макетов! Вновь поверил в себя! Мне очень трудно дается эта сфера.. ну прям ваще все туго даже самое банальное(( но я пытаюсь и не останавливаюсь!!! Спасибо Вам бесконечно огромнейшее Евгений!! Надеюсь когда-нить хватит знаний уже и выйти на фриланс наконец-то!!
Супер! Все получится!
Ну как у вас дела?
@@user-pr8zg4sw6c работаю уже
@@stivem9523 За какое время обучились?
@@stivem9523 хорош
Наикрутейшее видео о картинках, какое я когда-либо видела!
Огромное спасибо тебе, добрый человек! Очень ценные знания представил очень просто и понятно, СПАСИБО!!!
Спасибо огромное!!!Очень понятно и доступно подан материал, круто! Учусь по Вашим роликам и получаю огромное удовольствие от процесса.
Отличный урок всё понятно и доходчиво 👍- у тебя нет права останавливаться) то как ты это делаешь уникально - лайк подписка!
Спасибо! Постараюсь!
@@FreelancerLifeStyle присоединяюсь. Есть просто учителя, а есть Учителя... Вы Учитель!
Чудовий відео-урок.... все чітко і детально... Величезне Вам Дякую
Цей випуск сподобався найбільше, я очікував матеріал на дану тему але подача настільки шикарна що перевершила всі очікування!!!
Супер! Я рад!
Огромное спасибо! Всегда так четко и понятно!
Лучший бро! И текст и картинка и наполнение! Спасибо!
объясняете доходчиво, но что мне больше всего нравится, это то что вы прикрепляете файлы верстки к видео
Наконец-то! Ни в одной про теги picture\source я не нашёл упоминание атрибута media , а вот теперь у меня всё заработало, как надо!
Качественно, полезно, информативно! Спасибо!
Пушка! Не слежу за новыми свойствами, для меня это открытие)
Свойства то старые просто браузеры начинают их +- поддерживать)
Добрый день! Благодарю, Женя, за содержательный, полезный материал, понятное изложение, качественное видео и то, что делишься своим опытом и наработками! Успехов, дальнейшего развития, здоровья, мира и всех благ! 👍🤝🙂
Спасибо тебе, добрый человек, за object-position!
Остановил, поставил лайк. Хорошо, что не пропало совсем)
Огромное человеческое Спасибо! за твой труд. Всё четко и доходчиво!!!!
Пожалуйста!
Очень интересно учиться благодаря твоим видео.Спасибо за такую возможность!)
Очень понятное объяснение. Спасибо!!!
Благодарю за контент, как раз застрял на этой теме в проекте
Не смогла не поставить лайк, объясняете очень понятно .После каждого вашего ролика хочу что-то сверстать. Прямо чудо!!!
Спасибо!
За picture отдельное спасибо!
Все очень доступно и понятно. Спасибо большое!
Дуже класно. В мене був серйозний вайб, коли дойшов до макс відс. А після слів ти що ще не підписався і тд, то аж засміявся)) Дякую
Найкращий ютубер, вчитель по html, css, js. І просто крута людина!
Давно искал такие объяснения. Спасибо!
Очень полезный материал! Спасибо!
Это магия! Спасибо огромное за знания, которыми Вы с нами поделились! Это мега круто:)
Пожалуйста!
Есть одно слово от подачи информации - КАЙФ !
Спасибо за видео)!
Пожалуйста!
Автор, у тебя ТАЛАНТИЩЕ объяснять. Каждый раз по любым вопросам css/html стараюсь найти твои видео. Спасибо за твой труд! Подписан и буду рад новым видео для новичков )))
Очень здорово! Спасибо! Всегда после видео оставались вопросы а тут не успеваешь даже подумать о них как сразу их тебе разжевали!!!
Супер, я рад)
Очень качественный концентрат. Подход к разжевыванию и вкладыванию инфы в мозг новичка, как всегда, на высоте! Пять звезд!
Спасибо!
Дякуємо за відео, дизайнеру дуже важливо розуміти, що роблять із його макетом після дизайну.
Полезности и много, огромное спасибо! 🙂
Дякую за корисну інформацію
object-fit РЕБЯТА object-fit МАТЬ ЕГО!!!!!!!!!!! Какого хрена я не видел это видео раньше??? Спасибо Жека! Как всегда лайк!!!
Привет из Днепра!) Подача супер!) Буквально 2 недели назад я толком нифига не мог наверстать с нуля, только мог править существующую верстку и то не то чтобы кардинально. После просмотра плейлиста до этого видоса, сейчас без особых усилий наверстал макет тестового задания, причем лол в том, что выслали мне не макет а просто jpg, пришлось на глаз делать, но вышло неплохо как по мне! Спасибо, Женя, ты красавчик!))
Вы очень крутой! Храни вас бог!
Супер! Обожаю такие мастер классы быстро и без воды! Лайк однозначно! Даже скачаю в папку как пособие иногда бывает забываешь и приходиться быстренько вернуться и посмотреть.
Супер! Я рад!
наконец-то, я смогу поставить эти картинки разных размеров адекватно!)) спасибо, Вам!
топовые уроки !
Огромное СПАСИБО!!!
Для меня, драгоценный материал!!!!!!!!!!
Пожалуйста!
Спасибо большое, я благодаря тебе косяки в дипломе исправил object-fit реально TOP
теперь это мой любимый канал по сss реально ты профессионал своего дела )))
Спасибо большое, а то разобраться не мог, как нормально адаптировать блоки с картинками)))
Как всегда, лучший контент! Браво!
Спасибо!
Всегда с удовольствием ставлю лайк под каждым видео! Каждый ролик как праздник🥳
Супер! Я рад!
Просто супер-бомба урок! Я мучился с адаптивом картинок как мог, а теперь все ясно и понятно. Честь тебе и хвала, Евгений!
Спасибо! Рад что полезно!
Наглядно! Информативно! Понятно! Полезно!
Спасибо!!!!!))))
Очень прикольно. Теперь в следующий раз, практикуясь в вёрстке, буду пробовать юзать эти методы. Спасибо))
Благодарю Вас за видео.
Ну наконец файлы урока есть, так бы всегда было :) А за урок спасибо большое, всегда на высоте!
Оооо, поздно я его посмортела! Как информация из него мне бы понадобилась вчера!!!))) на шару пошла на собеседование с тем, что знала (в общем то не мало), а спросили в итоге именно материал этого урока! Прям с порога и первым делом))) где были мои глаза и голова раньше))) Спасибо огромное! Бесценный опыт))
Супер! Я рад!
Здравствуйте. Скажите, удалось ли вам пройти собеседование? Очень интересно, какие вопросы и какая у вас была база. Простите за беспокойство, просто я новичок в этом деле и хотелось бы от людей знающих узнать информацию.
@@happyfoxy9662 шанс был, но нашлись соискатели опытнее и с более подходящим набором знаний)) собеседование было интересным. Без текстового задания, но с вопросами по теории. Блочная модель, теги, порядок загрузки страницы я оптимизация и особенно оптимизация изображений. Pug, gulp, git, sass. Но всё это очень сильно зависит от работодателя - какие они используют технологии, какие у них задачи и почему и для чего готовы взять новичка.
Яна Александровна спасибо больше за ответ. жаль, конечно что не удалось у вас, но думаю база на данный момент вам позволит найти работу. да, я много читала о необходимой базе для новичка и там было, то что вы упомянули оптимизация изображений важна, но и так же зависит от фирмы и их готовности брать стажёров. скажите ещё, а как у вас с js ? и ещё раз простите за любопытство и расспросы)
Я думал что все знал о картинках, но почему то этой инфы нигде не встретил, новинка внезапно)
Частенько выручает видос, когда забываю ♥
как только лайкнул, помехи прошли. чудны дела твои!
2:47 я так испугался, что заставил жену и детей тоже подписаться на канал и поставить лайки)))
Ахах
Спасибо за урок!
Большое спасибо! Просто огромезное! Межконтинентальное! Межпланетное! Межгалактическое!
Пожалуйста!
Оу, хорошее свойство о котором я не знал) Спасибо! Лайк и подписка уже оформлены)
Большое спасибо ! Как всегда - на высоте !!!
Спасибо!
Супер! В первый раз посмотрела - ни фига не поняла. А после стрима по верстке для новичков, где используется класс .ibg, вернулась к этому видео, и теперь все понятно. СПАСИБО!
Сижу я такой значит на работе, приходит баг от тестера - "картинки в зависимости от изменения ширины или высоты родителя сильно искажаются" и тут такой значит вспомнил, вчера вышло новое видео что то там с картинками на канале Фрилансер по жизни. Сразу мысль - "может быть там найду что мне надо а то уже все препробовал...." и о ЧУДО, свойсво ОБЖЕКТ ФИТ. Спасибо большое за полезный контент!
спасибо за Вашу работу.
Отлично, взял на заметку пару приемов!) Теперь у меня с изображениями будет куда меньше проблем! Спасибо в очередной раз!)
Пожалуйста!
Жека иолодец я еще не раз возращаюсь к твоим видео и вспоминаю свойство как имено в совокупности чтоб они работали как пример это object fit и то что надо задавать width и height 100% . Спасибо за твой труд!!!
Супер классный туториал, впрочем как и всегда! шикарная подача! спасибо огромное! дай Бог тебе здоровья, удачи и творческих успехов )))
Спасибо!
Спасибо! Твое видео в очередной раз и вполне ожидаемо выручило меня. :)
СУПЕР!!!!
СПАСИБО!
Спасибо за видео. Подсвечено семейное фото на заднем фоне в начале - красивая деталь)
Я в восторге, большое спасибо....
Поставила лайк раньше, чем начались помехи)))) Женя, как всегда..видео - огонь! Спасибо тебе!!! Очень помогаешь в моей работе)
Я очень рад! ☺
Отличный урок! Спасибо
Пожалуйста!
Спасибо большое за ценную информацию! Смотрится на одном дыхании)
Пожалуйста!
Супер информативный выпуск! И фишка с помехами сработала отлично) Спасибо, лайк!
Я рад!
Спасибо тебе, хороший человек!
Спасибо тебе за твой труд, очень доходчивые объяснения, главное не бросай канал у тебя мега крутой контент.
Спасибо!
Отличный урок! Спасибо тебе большое. Учусь сейчас по твоим урокам чтобы устроиться джуном на front end позицию!
Спасибо! Успехов в учебе и работе!