Question

我想用CSS中的所有图像（我知道如何将它们作为背景图像放入）。

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

所以我的问题是：拥有相同的最佳方法是什么 CSS中的<div><img src="..." /></div>？

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

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

4 个答案: