如何使用 CSS 将图像放入 div 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10829675/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put an image in div with CSS?
提问by Dany Y
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><img src="..." /></div>在 CSS 中拥有等效项的最佳方法是什么
？
回答by Dany Y
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-tricks.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 上有结果，请告诉我添加它）
回答by JudeJitsu
you can do this:
你可以这样做：
<div class="picture1"> </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
否则，只需将它们用作普通
回答by Tabrez Ahmed
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>
回答by Alessandro Pezzato
With Javascript/Jquery:
使用 Javascript/Jquery：
- load image with hidden
img - when image has been loaded, get width and height
- dynamically create a
divand set width, height and background 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"); });
- 加载隐藏的图像
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"); });
