У меня есть этот iframe, который в зависимости от ситуации может содержать видео, и если изображение недоступно - у меня, похоже, проблема в том, что изображение недостаточно отзывчиво для масштабирования в зависимости от размера экрана - оно просто отрезает часть, которая находится вне контейнера.
Это то, что у меня сейчас есть.
.parent {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.parent__wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="parent">
<iframe class="parent__wrapper" src="https://placekitten.com/566/313" frameborder="0" scrolling="no"></iframe>
</div>
https://jsfiddle.net/onze9y0a/3/
Как мне избежать обрезки боков или кнопок при изменении размера экрана?