親要素に幅が指定された子要素img を全幅画像表示する　alignfull, alignwide CSS

グーテンベルグは、次期エディタの機能として、alignwide, alignfullといったクラスによる画像等のフルサイズ表示機能を追加しています。

これらの全幅画像の設定は、テーマがオプトインで、許可した場合に動作するようになっています。

Gutenbergエディタの、機能を見てみると、サイドバーなしの1カラムレイアウトが念頭にありそうですが、現在までのデフォルトテーマは、1カラムレイアウトのものは存在しませんし、既存テーマの多くは、サイドバーと、ウィジェットエリアを持っています。

2カラム3カラムのテーマの中で、alignwide, alignfullといった、親要素の幅をオーバーフローさせ、全画面表示の実装を考えてみたいと思います。

( 薄い点線で表示された枠線が、この投稿本文の領域になります。 )

一般的な画像表現

親要素に幅が指定されて入れば、たとえ画像サイズが親要素のサイズより大きくても親要素をオーバーフローすることなく表示する。

投稿本文から、画像がはみ出してしまわないよう多くのテーマではこのような目的のスタイル設定が行われています。

以下のように、全幅表示するためには、どのようなスタイルが必要でしょうか？

HTML

<figure>
		<img src="https://tenman.info/labo/snip/files/IMG00122.jpg" alt="" width="3116" height="1558" class="alignnone size-full wp-image-6461" />
		<figcaption>親ブロックで囲われた画像をフルサイズで表示する</figcaption>
	</figure>
	<figure class="alignfull">
		<img src="https://tenman.info/labo/snip/files/IMG00122.jpg" alt="" width="3116" height="1558" class="alignnone size-full wp-image-6461" />
		<figcaption>親ブロックで囲われた画像をフルサイズで表示する</figcaption>
	</figure>

CSS

figure.alignfull{
 width: 100vw;
 position: relative;
 left: 50%;
 right: 50%;
 margin-left: -50vw;
 margin-right: -50vw;
 display:table;
 max-width:none;
}
figure.alignwide img, figure.alignfull img{
 width:100vw;
 -o-object-fit:cover;
 object-fit:cover;
 margin-top:0;
 display:block;
 position:relative;
 left:-5px;
 /* 微調整用 */ }

3カラムでの適用例

Photo by adam morse on Unsplash

CSS note