完美响应圈 iFrame答案

【问题标题】：Perfect Responsive Circle iFrame完美响应圈 iFrame
【发布时间】：2014-11-18 01:47:43
【问题描述】：

如何创建一个完美的圆形且响应迅速的 iFrame？ I know I can add rounded corners by surrounding the iframe with a div，但我不确定如何制作一个完美的圆圈。

【问题讨论】：

标签： html css iframe responsive-design geometry

【解决方案1】：

你需要用两个 div 包裹你的 iframe。内部的应该是position: absolute;，而外部的应该是position: relative。您可以使用静态且相等的高度和宽度，以使其成为一个完美的圆圈，as shown in this jsfiddle examples。

HTML

<div class="iframe-outer"><!--position: relative-->
    <div class="iframe-inner"><!--position: absolute-->
        <iframe src="www.google.com" width="600" height="450"></iframe>
    </div>
</div>

但是，因为我们生活在一个屏幕大小不一的世界中，并且因为您想要一个完美的圆圈，所以添加更多的 CSS 以使其具有响应性是很有用的，based on Nathan Ryan's answer to "Height Equal To Dynamic Width."

Here's a jsfiddle to demonstrate a complete solution.

【讨论】：

我有精神分裂症。我也是。哈哈，很好。