iframe の高さをコンテンツに合わせる frame-sizing: content-height;

🖼️
note

iframe の高さをコンテンツの内容にあわせるという、少し前から話題になっていた機能だが、Chrome 154 で正式に使えるようになった。

New in Chrome 154: iframes that automatically resize themselves to their content

New in Chrome 154: iframes that automatically resize themselves to their content

Chrome 154 adds support for responsively-sized iframes, letting an <iframe> size itself based on the intrinsic size of its embedded document. This is perfect for seamlessly embedding third-party comment widgets, varying-height social media embeds, or any other type of embed that uses an <iframe>.

www.bram.us
Responsive iframes in Chrome 154  |  Blog  |  Chrome for Developers

Responsive iframes in Chrome 154  |  Blog  |  Chrome for Developers

Chrome 154 adds support for responsively-sized iframes, letting an iframe size itself based on the intrinsic size of its embedded document.

developer.chrome.com
zenn.dev

zenn.dev

zenn.dev

表示する側は iframe に次のように指定することで、その iframe の高さがコンテンツに沿ったものになる。

iframe {
  frame-sizing: content-height;
}

frame-sizing にはこれ以外にも content-width content-inline-size content-block-size があり、width だけで使うことはなかなかなさそうだが、他は使いたいシーンがありそう。

frame-sizing CSS property - CSS | MDN

frame-sizing CSS property - CSS | MDN

The frame-sizing CSS property can be used to set an <iframe> element's horizontal or vertical size to equal the layout size of its embedded document in the same dimension, but only if the embedded document has opted in to sharing its size information.

developer.mozilla.org

注意点として、表示される側の HTML で responsive-embedded-sizing を設定する必要がある。allow-origins=* でも特段問題はなさそうだが、利用側を制限することが可能。

<meta name="responsive-embedded-sizing" content="allow-origins=*">

また、コンテンツのサイズが変更になった場合、表示される側から window.requestResize() を呼び出すことでリサイズを要求できる。

yaakai.to
← ホームへ戻る

関連記事