Question

我如何创建一个完美的圈子和响应的iFrame？ I know I can add rounded corners by surrounding the iframe with a div，但我不确定如何才能打造一个完美的圆圈。

Answer 1

您需要将iframe包含两个div。内部应该是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以使其具有响应性是有用的，{{3 }}

based on Nathan Ryan's answer to "Height Equal To Dynamic Width."

完美的响应圈iFrame

1 个答案: