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

Posted 2023-03-06

【中文标题】如何使用 CSS 将图像放入 div 中？

【英文标题】：How to put an image in div with CSS?

【发布时间】：2012-06-05 11:29:10

【问题描述】：

我想将我的所有图片都放在 CSS 中（我知道的唯一方法是将它们作为背景图片放入）。

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

所以我的问题是：获得等价物的最佳方法是什么 <div><img src="..." /></div> 在 CSS 中？

【问题讨论】：

背景不是替代品：如果图像与内容理解无关，则必须使用背景，否则它们应该与常规<img>

一样

除了手动找出图像的大小并给 div 相同的值，我认为你不能。

正确的方式：<img> 如果图像是相关的，<div> 有背景如果图像只是眼睛糖果。如果图像大小可变且重要，则应使用<img>。为什么要使用背景？

【参考方案1】：

你可以这样做：

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

否则，就直接使用它们

【讨论】：

我试图避免固定尺寸。

如果您想避免固定尺寸，那么最简单的方法是使用普通的img 标签。你想用这个来完成什么？也许还有另一种编程解决方案，比如通过 php getimagesize 获取图像大小，然后为该特定图像回显相应的style 和或img 标签。

【参考方案2】：

将此作为示例代码。用您的图片尺寸替换图片高度和图片宽度。

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

【讨论】：

有效，但问题是关于“CSS”

也许不应该。

【参考方案3】：

使用 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");
  );

【参考方案4】：

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，并且隐藏在图像后面。

您应该删除：之前，我编辑了我的答案。在这里查看jsfiddle.net/2pFhc

@DanyY 嘿，你说你更新了你的小提琴，但我在那里只看到绿色边框：jsfiddle.net/2pFhc 为什么？

这对我在 Firefox 55 上不起作用。需要一些跨浏览器的决定。与之前|之后一起使用。

适用于我在 FF 和 chrome 上使用 ::before 和 display: flex; => jsfiddle.net/q0vL1m7v/1