如何使 iframe 中的图片全屏

在一个 iframe 中放置一张图片，我们期望图片能够在全屏中展示，但是 iframe 默认情况下只能展示指定大小的内容。那么，如何才能让图片全屏展示呢？下面介绍几种方法。

第一种方法：使用 JavaScript

使用 JavaScript 可以通过改变 iframe 的高度和宽度实现图片的全屏展示。

// 获取 iframe 元素
let iframe = document.querySelector('iframe');

// 获取 iframe 内的图片元素
let img = iframe.contentDocument.querySelector('img');

// 设置 iframe 的高度和宽度为图片的高度和宽度
iframe.style.width = img.offsetWidth + 'px';
iframe.style.height = img.offsetHeight + 'px';

第二种方法：使用 CSS

在 iframe 的父元素中添加以下样式可以让图片全屏展示。

.parent {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iframe {
    width: 100%;
    height: 100%;
}

<div class="parent">
    <iframe class="iframe" src="url"></iframe>
</div>

第三种方法：使用 Fullscreen API

HTML5 中引入了 Fullscreen API，可以通过该 API 将某个元素全屏展示。

let iframe = document.querySelector('iframe');

// 将 iframe 元素全屏展示
if (iframe.requestFullscreen) {
    iframe.requestFullscreen();
} else if (iframe.webkitRequestFullscreen) {
    iframe.webkitRequestFullscreen();
} else if (iframe.msRequestFullscreen) {
    iframe.msRequestFullscreen();
}

以上是三种实现方法，可以根据自己的需求选择一种合适的方法来实现全屏展示。