如何使用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 */
}

否则，只用它们

将其作为示例代码。用图像尺寸替换imageheight和image width。

<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");
    });