将 div 的大小设置为其背景图像

Posted 2023-03-06

【中文标题】将 div 的大小设置为其背景图像

【英文标题】：Set size of the div to its background image

【发布时间】：2014-03-31 03:53:54

【问题描述】：

我的页面上有以下 div：

<div id="logo">
</div>

我想在这个 div 中放一张背景图片：

#logo 
    background: url('logo3_light.jpg') no-repeat;
    width: 100%;
    height: auto;

但是图像永远不会显示出来，因为 div 的高度是 0px。

我想以某种方式将包装 div 的高度设置为缩放图像的高度。有可能吗？

【问题讨论】：

您的徽标 jpg 的尺寸（宽度和高度）是多少？

1600x100px，但我不想设置 height: 100px，我希望它根据宽度动态计算，比如 height: auto

div 最终会有内容吗？您是否有不想设置div height: 100px; 的原因？

尝试将其最小高度和宽度设为 1 像素。如果还是一样，可能需要一些js

How to get div height to auto-adjust to background size? 的可能重复项

【参考方案1】：

不幸的是，没有简单的方法。 例如，您可以使用 javascript 获取图像的 url，加载并获取其尺寸，然后将尺寸设置为 div 元素。

我会做的就是直接使用标签将图像放入div。如果您需要额外的内容，您可以将内容放在您已有的 div 内的另一个 div 中。然后可以将内部 div 定位设置为绝对等，希望它能让您知道如何做到这一点

【讨论】：

有一些简单的方法，只是不像人们想象的那么明显。看我的回答。

【参考方案2】：

由于您的原始图像是1600x100，因此高度是其宽度的6.25%，所以您可以试试这个

#logo 
    background: url(http://dummyimage.com/1600x100/000/fff.jpg) no-repeat;
    width: 100%;
    height: auto;
    padding-bottom : 6.25%; 
    background-size: cover; 

codepen 示例：http://codepen.io/anon/pen/EnJvI

---

注意：您不能简单地使用height: 6.25%，因为高度将相对到父元素的高度（body 元素，其高度未定义，它是@ 987654327@，因为您的徽标元素为空）。

padding-bottom 使用元素本身的宽度来计算正确的值（此技术通常用于在响应式设计中保持正确的视频纵横比，仅供参考）。

无论如何，我不建议将空标记用于样式目的：您的徽标应该是常规的 img 元素而不是背景，因为徽标通常传达信息

【讨论】：

感恩！还有一个问题：您的解决方案有效，但为什么我不能直接在高度上设置 6.25%？不知何故，它不起作用。

这是由于选择了相对单位：基于父身高的6.25%（但body没有定义高度），而padding-bottom计算6.25%元素本身的宽度

那么 6.25% 的高度和 6.25 的内边距是 2 个不同的值？

关于您对使用常规 img 标签的评论。我刚刚学习媒体查询，我想尝试为不同的屏幕尺寸加载 2 个不同的图像。可能有更好的方法。

@damluar 是的。如果您设置height: 6.25%;，那么它将不起作用，因为它试图计算父元素的 6.25%，这是一个空徽标div。这就像试图找到 0 的 6.25%（提示：它仍然是 0）。这就是为什么它不起作用。设置height: auto; 使高度足够大以包含其所有子元素。

【参考方案3】：

在这里找到答案：How to get div height to auto-adjust to background size?

<div style="background-image: url(http://your-image.jpg);">
    <img src="http://your-image.jpg" style="visibility:hidden"/>
</div>