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 중국어 웹사이트의 기타 관련 기사를 참조하세요!