ラッパー要素を子画像の最大幅に自動的に調整するにはどうすればよいですか?

ラッパーが子画像の最大幅を取るようにしますか?

はじめに:

Web サイトのデザイン、子コンテンツの幅に自動的に調整するラッパー要素を作成することが必要になる場合があります。これは、子コンテンツが画像の場合に特に便利です。その幅はソースに応じて変化する可能性があるためです。

望ましい結果:

ラッパー要素を作成したいと考えています。これは、固定幅を明示的に設定せずに、子画像の最大幅を取得します。これにより、ラッパーの幅が必要以上に広くならないようにしながら、画像を正しく表示できます。

解決策:

を使用してこの動作を実現することはできません。純粋な CSS を使用できる「ハック」があります。ラッパー要素を強制的にテーブルにし、その幅を 1% に設定することで、画像をだましてラッパーの幅を壊し、独自の幅をラッパーの幅として設定することができます。 width.

コード:

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
}

<div class="wrapper">
  <img src="https://placekitten.com/300/300">
  <p>Lorem ipsum...</p>
</div>

説明:

表示がテーブルに設定されている場合、要素はテーブルに変換され、その子要素はテーブルのセルになります。ただし、ラッパーにも 1% の幅が与えられており、これは非常に小さいです。したがって、画像はラッパーの幅を無視し、独自の幅を設定します。これがラッパーの実際の幅になります。

以上がラッパー要素を子画像の最大幅に自動的に調整するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。