CSS3

プロパティ

contain

→●、mdn

強い封じ込め。

contain は CSS のプロパティで、ある要素とその内容が、できる限り多く、文書ツリーの他の部分から独立していることを示します。これによってブラウザーがレイアウト、スタイル、描画、寸法、およびその組み合わせの再計算を、ページ全体ではなく DOM の限られた領域に対して行うことで、性能上の明らかな利点をもたらします。

このプロパティはページ上にそれぞれ独立したたくさんのウィジェットがあるときに有益であり、ウィジェットの内部を、ウィジェットの囲みボックスの外側の副作用から守るために使用することができます。

none ⤴

この値は、このプロパティの効果が及ばないようにする ― 要素には封じ込め効果を適用せず、通常どおり具現化することを指示する。

strict ⤴

この値は、size layout paint style に算出される ― したがって、要素に対し、すべての形の封じ込めをオンにする。

content ⤴

この値は、layout paint style に算出される ― したがって、要素に対し、サイズ封じ込めを除く、すべての形の封じ込めをオンにする。

注記： contain: content は、適度に広く“安全に”適用される ― 実施におけるその効果は相応に小さなものであり、ほとんどの内容は、その制約に抵触しない。しかしながら、サイズ封じ込めは適用しないので、要素は依然として、その内容のサイズに呼応し、レイアウトを ― 欲されるものより先祖まで遡って ― 無効化する可能性もある。可能なときは、封じ込めをできるだけ得たければ、contain: strict を利用すること。

<DIV style="border:1px solid black">
 あああああああああああ<BR>
 <IMG style="float:left; border:1px solid black" src="Com/1.jpg" alt="画像1">
</DIV>
<DIV style="border:1px solid black">
 いいいいいいいいいいいいい<BR>
 <IMG style="float:left; border:1px solid black" src="Com/1.jpg" alt="画像2">
 ううううううううううううう<BR>
</DIV>

あああああああああああ

いいいいいいいいいいいいい
ううううううううううううう

<DIV style="contain:content; border:1px solid red">
 あああああああああああ<BR>
 <IMG style="float:left; border:1px solid black" src="Com/1.jpg" alt="画像1">
</DIV>
<DIV style="contain:content; border:1px solid red">
 いいいいいいいいいいいいい<BR>
 <IMG style="float:left; border:1px solid black" src="Com/1.jpg" alt="画像2">
 ううううううううううううう<BR>
</DIV>

あああああああああああ

いいいいいいいいいいいいい
ううううううううううううう

しかし、そもそもfloat物は最初に置くべき。

size ⤴

この値は、要素に対し、サイズ封じ込めをオンにする。サイズ封じ込めボックスは、その子孫を精査する必要なく、レイアウトできるようになる。

<IMG src="Com/100x50.gif" style="border:1px solid black; width:150px;
">

未指定

<IMG src="Com/100x50.gif" style="border:1px solid red; width:150px;
 contain:size;
">

<IMG src="Com/100x50.gif" style="border:1px solid red; width:150px; height:30px;
 contain:size;
">

layout ⤴

この値は、要素に対し、レイアウト封じ込めをオンにする。レイアウトの目的においては、レイアウト封じ込めボックスの内外のレイアウトが互いに影響し合わないよう、要素を不透明にすることを確保する。

style ⤴

この値は、要素に対し、スタイル封じ込めをオンにする。これは、［要素とその子孫の他にも効果を及ぼし得るようなプロパティ］による効果が、要素から外へ波及しないことを確保する。

paint ⤴

この値は、要素に対し、塗り封じ込めをオンにする。これは、［要素がスクリーン外にあるか可視でない場合には、その子孫も可視にならない］ことが保証されるよう、［塗り封じ込めボックスの子孫は、要素の限界域の外側には表示されない］ことを確保する。

contain プロパティは、一般に、すべての要素に適用される（ ::before, ::after 疑似要素も含む） ― 一部の種別の封じ込めは、一部の要素に対する効果は無いが。詳細は、封じ込めの種別にて。加えて、[SVG2] の事例においては、このプロパティは、CSS レイアウト ボックスが結び付けられた SVG 要素に限り適用される。

img {
  width: 100px;
  aspect-ratio: 1/1;
  contain: size;
}

<img src="https://www.example.com/300x100.jpg">

テスト