Основы CSS - свойство aspect-ratio - полный разбор 📺
Давайте представим такую ситуацию - вас просят вставить на страницу видео с YouTube. И не просто вставить, а так, чтобы оно занимало всю ширину экрана или блока, в который вставлено.
Из основ HTML мы знаем, что вставить видео мы можем используя тег iframe, который нам предоставляет YouTube. Из основ CSS мы знаем, что растянуть на всю ширину мы можем его, путем задания ширины width: 100%, а для высоты можем указать height: auto. Но CSS не всесилен, так же как и тег iframe. Он увы не понимает height: auto, вот если бы это был теш img, то было бы совсем другое дело.
Раньше мы прибегали к CSS трюку с высотой блока заданной, через вертикальный padding. Но сейчас есть удобное свойство CSS aspect-ratio, которое делает тоже самое, но даже лучше.
0:00 Вставка видео
0:57 Старый способ
1:41 Возможны значения
1:50 aspect-ratio
2:17 Принимаемые значения
3:54 aspect-ratio - возможные проблемы
4:45 aspect-ratio и flex
5:18 Где использовать?
5:18 Галлерея
6:12 Промо блок
6:29 Декоративные элементы
#css #html #web #webdevelopment #frontend #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #css3 #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #javascript #vue #react #angular #svelte #vanillajs #js #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga
Подписывайтесь на меня в соц. сетях:
👨💻 LinkedIn - / maksymfariga
📷 Instagram - / maksym_fariga (@maksym_fariga)
📖 Facebook - / maksymfariga
🐤 Twitter - / fariga_m
🛩 Telegram - https://t.me/web_education_new
Accent-color - CSS свойство, которое не смогло 👉 • Accent-color - CSS свойство, которое ... ✍️
🎎 CSS keywords: inherit, initial, unset, revert, all 👉 • CSS keywords: inherit, initial, unset... ✍️
🖼 CSS text-stroke, text-fill-color и paint-order 👉 • -webkit-text-stroke, -webkit-text-fil... ✍️
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий! PPI и DPI, DP... ✍️
