iframe ведет себя как элемент изображения с точки зрения соотношения сторон и отзывчивости

Question

Есть множество решений там, где ширина реагирует, а iframe сохраняет соотношение сторон, но я не могу найти решение, которое также включает в себя высоту iframe.

В отношении вышеизложенного Если у решения iframe есть родительский элемент div, высота которого может изменяться, решения просто обрезают нижнюю часть iframe, если высота слишком мала, а не реагируют.

Мне нужно решение, которое применимо в случае, когда у вас есть изменяющаяся высота и ширина родительского элемента, в котором находится iframe, для использования на разных устройствах и просмотра размеров портов.

Решение должно позволить iframe вести себя как отзывчивое изображение элемент, который сохраняет соотношение сторон при изменении размера как по ширине, так и по высоте.

Answer 1

Я использовал соотношение сторон медиа-запроса, чтобы получить желаемый результат

Answer 2

Вы можете сделать ваш iframe отзывчивым, используя position: absolute; в контейнере, однако вам необходимо убедиться, что в контейнере установлена ​​высота.

.container {
  position: relative;
  height: 500px;
  width: 100%;
}

.container iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}