如何使用CSS在div中放置图像?

I would like to have all my images in CSS (the only way I know how is to put them in as background images).

我想把所有的图片都放在CSS中(我唯一知道的方法就是把它们作为背景图片)。

But the problem in this solution is you can never let the div take the size of the image.

但是这个解决方案的问题是，您不能让div使用图像的大小。

So my question is: what is the best way to have the equivalent of <div><img src="..." /></div> in CSS?

因此，我的问题是:什么是最好的方法来获得等价的

< / div >吗?

4 个解决方案

#1

100

This answer by Jaap :

以下是Jaap的回答:

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

and in CSS :

在CSS中:

div.image {
   content:url(http://placehold.it/350x150);
}

you can try it on this link : http://jsfiddle.net/XAh2d/

您可以在这个链接上尝试:http://jsfiddle.net/XAh2d/

this is a link about css content http://css-tricks.com/css-content/

这是一个关于css内容的链接http://css- passs.com/css -content/。

This has been tested on Chrome, firefox and Safari. (I'm on a mac, so if someone has the result on IE, tell me to add it)

这已经在Chrome、firefox和Safari上进行了测试。(我在mac电脑上，如果有人得到IE的结果，请告诉我添加它)

#2

you can do this:

你可以这样做:

<div class="picture1">&nbsp;</div>

and put this into your css file:

然后把它放到你的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 */
}

otherwise, just use them as plain

否则，就简单地使用它们

#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>

#4

With Javascript/Jquery:

使用Javascript / Jquery:

load image with hidden img
使用隐藏img加载图像
when image has been loaded, get width and height
当图像被加载后，得到宽度和高度。
dynamically create a div and set width, height and background
动态创建一个div并设置宽度、高度和背景

remove the original img

删除原来的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");
  });

#1

100