我想将我的所有图片都放在 CSS 中（我知道的唯一方法是将它们作为背景图片放入）。
但是这个解决方案的问题是你永远不能让 div 占据图像的大小。
所以我的问题是：获得等价物的最佳方法是什么
<div><img src="..." /></div> 在 CSS 中？
【问题讨论】：
<img> 一样
<img> 如果图像是相关的，<div> 有背景如果图像只是眼睛糖果。如果图像大小可变且重要，则应使用<img>。为什么要使用背景？
你可以这样做：
<div class="picture1"> </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 */
}
否则，就直接使用它们
【讨论】：
img 标签。你想用这个来完成什么？也许还有另一种编程解决方案，比如通过 PHP getimagesize 获取图像大小，然后为该特定图像回显相应的style 和或img 标签。
将此作为示例代码。用您的图片尺寸替换图片高度和图片宽度。
<div style="background:yourimage.jpg no-repeat;height:imageheight px;width:imagewidth px">
</div>
【讨论】：
使用 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");
});
【讨论】：
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上有结果，告诉我添加它）
【讨论】：
div 采用与您所要求的相同大小的图像。看看如果给 div 添加边框会发生什么：jsfiddle.net/XAh2d/6 Nothing，因为 div 的大小为 0x0，并且隐藏在图像后面。