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

我希望我的所有图片都是 CSS 格式的(我知道的唯一方法就是把它们作为背景图片放进去)。

但是这个解决方案的问题在于您永远不能让 div 取代图像的大小。

因此，我的问题是: 什么是最好的方法，有相当于 在 CSS 中的 <div><img src="..." /></div>？

856387 次浏览
小开

你可以这样做:

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

否则，就当它们是普通的

小开

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

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

使用 Javascript/Jquery:

  • 用隐藏的 img加载图像
  • 当图像已加载，得到宽度和高度
  • 动态创建一个 div并设置宽度，高度和背景

  • remove the original 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");
});
小开
最佳答案

亚普给出的答案是:

<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 上有结果，告诉我添加它)


提交答案