Давайте представим такую ситуацию - вас просят вставить на страницу видео с RU-vid. И не просто вставить, а так, чтобы оно занимало всю ширину экрана или блока, в который вставлено.
Из основ HTML мы знаем, что вставить видео мы можем используя тег iframe, который нам предоставляет RU-vid. Из основ 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 - t.me/web_education_new
Accent-color - CSS свойство, которое не смогло 👉 • Accent-color - CSS сво... ✍️
🎎 CSS keywords: inherit, initial, unset, revert, all 👉 • CSS keywords: inherit,... ✍️
🖼 CSS text-stroke, text-fill-color и paint-order 👉 • -webkit-text-stroke, -... ✍️
🥅 Не знаете, что такое пиксель или почему он не тот, за кого себя выдает? 👉 • А px, то не настоящий... ✍️
2 июн 2024
