屏幕尺寸更改时使图像保持宽高比

Question

我有这个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/

如何避免随着屏幕尺寸的变化而割伤侧面或按钮？