Относительная адаптация размера iFrame в зависимости от размера мобильного окна. ⇐ CSS

[Anonymous]

Я встраиваю IFrame в свой html-файл. Внешняя веб-страница представляет собой холст шириной 1000 пикселей и высотой 480 пикселей, см. ниже.
Мой IFrame выглядит так (я использую Tailwindcss)
< pre class="lang-html Prettyprint-override">



Когда я просматриваю свой холст, встроенный в iframe, в мобильном представлении, вы можете видеть, что он слишком велик для страницы (см. первое изображение). Я хочу, чтобы содержимое iframe всегда было полностью видно (см. изображение 2), но я не знаю, как это сделать.


Однако это должно выглядеть так


Я попробовал несколько подходов, таких как уменьшение размера с помощью JavaScript и установка 100% ширины и высоты, но это все еще не показывает то, что я хочу.
Моя внешняя веб-страница выглядит так. Внутри контейнера div предварительного просмотра будет вставлен холст размером 1000x480 пикселей







html,
body {
margin: 0;
padding: 0;
/* width: 100%; */
/* height: 100%; */
}

#preview {
width: fit-content;
height: fit-content;
}

.testing {
width: fit-content;
height: fit-content;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}












Подробнее здесь: https://stackoverflow.com/questions/791 ... indow-size