DIV の柔軟性を失わずに、CSS を使用して DIV に画像を埋め込むにはどうすればよいでしょうか?

CSS を使用した DIV への画像の埋め込み

質問:

CSS ユーザーはよく設定に頼ることになります。画像を背景画像として使用して DIV に組み込みます。ただし、このアプローチでは、画像の寸法に適合する DIV の能力が制限されます。この問題に対処するには、次の HTML 構造と同等の CSS を作成するにはどうすればよいですか?

<code class="html"><div><img src="..." /></div></code>

回答:

Jaap のソリューションによれば、次のものを利用できます。手法:

HTML:

<code class="html"><div class="image"></div></code>

CSS:

<code class="css">div.image::before {
   content: url(image-url);
}</code>

このメソッドは CSS ::before を使用します。疑似要素を使用して、DIV 内の最初の要素として画像を挿入し、DIV サイズと画像の寸法に関して必要な柔軟性を提供します。

例:

以下コード スニペットはこの手法を示しています:

<code class="html"><div class="image"></div></code>

<code class="css">div.image::before {
   content: url("https://placehold.it/350x150");
}</code>

追加リソース:

• CSS コンテンツ: https://css-tricks.com/css -content/
• Chrome、Firefox、Safari でブラウザ間の互換性を確認しています。 IE の結果があれば、この応答に含めて報告してください。

以上がDIV の柔軟性を失わずに、CSS を使用して DIV に画像を埋め込むにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。