如何用CSS将图像放入div中？

Question

我想用CSS中的所有图像(我知道如何将它们作为背景图像放入的唯一方法).

但是这个解决方案的问题是你永远不能让div占用图像的大小.

所以我的问题是:<div><img src="..." /></div>在CSS中使用等效的最佳方法是什么 ？

Answer 1

这个答案由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上有结果,请告诉我添加它)

Answer 2

你可以这样做:

<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 */
}

否则,只需使用它们

Answer 3

以此作为示例代码.用图像尺寸替换图像高度和图像宽度.

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

Answer 4

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