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

Question

我想在 CSS 中使用我的所有图像（我知道的唯一方法是将它们作为背景图像放入）。

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

<div><img src="..." /></div>所以我的问题是：在 CSS中拥有等价物的最佳方式是什么 ？

Answer 1

Jaap的回答：

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

在 CSS 中：

div.image::before {
   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

Take this as a sample code. Replace imageheight and image width with your image dimensions.

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