Нередко возникает потребность использовать iFrame - элемент HTML, позволяющий внедрять на одну веб-страницу другую веб-страницу. iFrame действует как окно или портал, через который можно видеть и взаимодействовать с другим документом, не покидая исходной страницы.
Основная проблема iFrame в том, что он не обладает такой гибкостью, как стандартные HTML-элементы. Например, его нельзя просто и безболезненно растянуть на весь родительский контейнер.
❓ Но что делать, если хочется, например, растянуть iFrame по ширине контейнера, при этом сохранив пропорции окна? Современный CSS позволяет это сделать при помощи свойства
aspect-ratio. Это свойство полезно не только для iFrame, но и для изображений и вообще любых элементов.На самом деле, до появления
aspect-ratio ситуация c iFrame не была совсем безысходной. Приходилось выкручиваться, добавляя элементу четко рассчитанный padding-top или padding-bottom. 🔗 Рекомендуем прочитать статью, в которой приведены примеры обеих реализаций. А подробнее про
aspect-ratio можно узнать на MDN.