CSS로 div에 이미지를 넣는 방법은 무엇입니까?

모든 이미지를 CSS로 만들고 싶습니다 (배경 이미지로 넣는 방법을 아는 유일한 방법).

그러나이 솔루션의 문제는 div가 이미지의 크기를 차지하도록 할 수 없다는 것입니다.

그래서 내 질문은 : <div><img src="..." /></div>CSS 에서에 상응하는 가장 좋은 방법은 무엇 입니까?

Jaap의 답변 :

<div class="image"></div>​

그리고 CSS에서 :

div.image {
   content:url(http://placehold.it/350x150);
}​

이 링크에서 시도해 볼 수 있습니다 : http://jsfiddle.net/XAh2d/

이것은 CSS 콘텐츠에 대한 링크입니다 http://css-tricks.com/css-content/

이것은 Chrome, firefox 및 Safari에서 테스트되었습니다. (저는 Mac을 사용하고 있으므로 누군가 IE에 결과가 있으면 추가하라고 알려주세요)

다음과 같이 할 수 있습니다.

<div class="picture1">&nbsp;</div>

이것을 CSS 파일에 넣으십시오.

div.picture1 {
   width:100px; /*width of your image*/
   height:100px; /*height of your image*/
   background-image:url('yourimage.file');
   margin:0; /* If you want no margin */
   padding:0; /*if your want to padding */
}

그렇지 않으면 그냥 평범하게 사용하십시오.

이것을 샘플 코드로 사용하십시오. 이미지 높이와 이미지 너비를 이미지 크기로 바꿉니다.

<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>

Javascript / Jquery 사용 :

• 숨겨진 이미지로드 img
• 이미지가로드되면 너비와 높이를 가져옵니다.
• div너비, 높이 및 배경을 동적으로 만들고 설정

• 원본 제거 img

    $(document).ready(function() {
      var image = $("<img>");
      var div = $("<div>")
      image.load(function() {
        div.css({
          "width": this.width,
          "height": this.height,
          "background-image": "url(" + this.src + ")"
        });
        $("#container").append(div);
      });
      image.attr("src", "test0.png");
    });