Адаптивні зображення та відео. Після того, як ви зрозуміли гнучку сітку, настав час звернути увагу на інший вміст веб -сторінок, що вимагає певних маніпуляцій, щоб стати адаптивними. Ми говоримо про зображення та відео. Якщо ви просто додасте зображення на веб -сторінку і зменшите вікно браузера, ви побачите, що зображення не адаптується до ширини вікна, а зберігає свої початкові розміри. Це може призвести до появи горизонтальної прокрутки, а також до того, що зображення вийде за межі адаптивного стовпця: Адаптивні зображення за допомогою CSS. Як зробити зображення адаптивним з CSS? Для початку вам потрібно буде видалити атрибути ширини та висоти в тегу зображення (якщо такі є). Ваш HTML -код не повинен їх містити: Додайте наступний запис до таблиці стилів: Це означає, що максимальна ширина тегу буде дорівнювати ширині блоку контейнера, в якій він міститься. Зображення не зможе вийти за рамки свого батька, і коли батько зміниться, воно автоматично адаптується до нього. Таким же чином ви можете зробити ширину зображення, наприклад, половину ширини батьківського контейнера: Адаптивні відео. Щоб зробити адаптивні теги, а також додайте для них той самий код CSS, що і для зображень. Доцільно перелічити всі селектори одночасно: IMG, відео, вставка, об’єкт. Адаптивна iframe. Все складніше, якщо ви вбудовуєте відео через тег. Тоді наведений вище метод не працює тут. Нам доведеться вдатися до допомоги JavaScript, або використовувати більш хитрий код CSS. Якщо ви вибрали другий варіант, вам потрібно буде розмістити тег у додатковому контейнері. Наприклад: Потім додайте наступний код CSS: .Video .Video iframe. Як ви помітили, в коді присутній підкладка присутній із дивним значенням 56,25%. Що це означає? Значення кадрового дна, зазначеного у відсотках, вважається відносно ширини блоку. Ми отримали число 56,25, визначивши співвідношення боків побудованого відео (16: 9) та розділивши число короткої сторони на число довгих боків, після чого він помножив результат на 100: Якщо ви збираєтеся інтегрувати відео з іншим співвідношенням сторін, скажімо, 4: 3, то для визначення відповідного значення кадрового дна зробіть ту саму процедуру: Цей метод також використовується в рамках завантажувальної програми. Далі в підручнику: знайомство з Flexbox.