Question

我已经尝试过将属性和属性组合在一起的方法，以便将该iframe嵌入WordPress帖子中，以便在移动屏幕和大屏幕上均可见。看来我需要指定一个高度才能显示整个框架，但是这样做会停止在移动设备上显示所有宽度。

非常感谢任何帮助。

<div markdown="0" id="island">
  <iframe style="width: 100%; border: none" scrolling="no" src="http://devonmathstuition.co.uk/dev/treasure-island/"></iframe>
</div>

Answer 1

您需要在另一个元素（位置为relative）内创建iframe，并在absolute位置放置iframe：

padding-top：56.25％可用于保持iframe的比例（16：9）。

正在使用JSfiddle（尝试调整显示标签的大小：））。

HTML：

<section>
    <article id="iframe">
        <iframe src="src.html"></iframe>
    </article>
</section>

Css：

section{
    max-width: 800px;
}

#iframe{
    width: 100%;
    max-width: 800px;
    position: relative;
    padding-top: 56.25%;
}

iframe{
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    margin: auto;
    display: block;
    position: absolute;
}

src：smashingmagazine.com

编辑：here's a video可调整大小的iframe：）

edit2：糟糕，忘记了一个section标签

难以处理的iframe嵌入-播放效果不佳

1 个答案: