iframe,embed框架设置自适应等比例缩放纯CSS实现方法

网站经常会引用外部框架，比如<iframe>、<embed>等，这类框架不能在页面里面实现自适应布局，用JS的方法可以参考文章《腾讯优酷视频分享iframe,embed高度多种比例控制》，这里提供另一种纯CSS的解决方法。

要使 <iframe> 根据屏幕宽度保持 4:3 的比例，可以使用 CSS 的 aspect-ratio 属性。这种方法简单且兼容性良好，适用于大多数现代浏览器、手机浏览器，老浏览器不支持这个属性，参考上面的方法即可。

CSS样式：

.iframe-container {
    width: 100%;
    /* 设置高度为宽度的 3/4，即 4:3 比例 */
    aspect-ratio: 4 / 3;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

HTML部分

<div class="iframe-container">
  <iframe src="https://www.vi586.com" frameborder="0" allowfullscreen></iframe>
</div>

扩展阅读