html - 完美的响应式圆形 iFrame

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

最佳答案

您需要用两个 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.

关于html - 完美的响应式圆形 iFrame，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26954636/