จะใส่รูปภาพใน div ด้วย CSS ได้อย่างไร?

ฉันต้องการให้ภาพทั้งหมดของฉันอยู่ใน 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");
    });