tgoop.com/startpoint_dev/39
Last Update:
🤔 Адаптивный iFrame - правда или миф?
Нередко возникает потребность использовать iFrame - элемент HTML, позволяющий внедрять на одну веб-страницу другую веб-страницу. iFrame действует как окно или портал, через который можно видеть и взаимодействовать с другим документом, не покидая исходной страницы.
Основная проблема iFrame в том, что он не обладает такой гибкостью, как стандартные HTML-элементы. Например, его нельзя просто и безболезненно растянуть на весь родительский контейнер.
❓ Но что делать, если хочется, например, растянуть iFrame по ширине контейнера, при этом сохранив пропорции окна? Современный CSS позволяет это сделать при помощи свойства aspect-ratio. Это свойство полезно не только для iFrame, но и для изображений и вообще любых элементов.
На самом деле, до появления aspect-ratio ситуация c iFrame не была совсем безысходной. Приходилось выкручиваться, добавляя элементу четко рассчитанный padding-top или padding-bottom.
🔗 Рекомендуем прочитать статью, в которой приведены примеры обеих реализаций. А подробнее про aspect-ratio можно узнать на MDN.
BY Настя Котова // Frontend & Node.js
Share with your friend now:
tgoop.com/startpoint_dev/39