html - 完美的响应圈 iFrame

Question

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

Answer 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.