How to Embed an Image within a Div Using Pure CSS?

How to Place an Image within a Div Using CSS

Many developers resort to setting images as background images within CSS, a solution that doesn't allow the div to conform to the image's dimensions. To replicate the following HTML code using pure CSS:

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

Solution:

Implement the following code:

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

CSS:

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

Additional Notes:

• This technique has been tested on Chrome, Firefox, and Safari.
• Refer to the following resource for further information on CSS content: http://css-tricks.com/css-content/

The above is the detailed content of How to Embed an Image within a Div Using Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!