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

Question

我的页面上有以下div：

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

我想在此div中放入背景图片：

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

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

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

Answer 1

由于您的原始图片为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; 
}

有关代码笔的示例： http ://codepen.io/anon/pen/EnJvI

---

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

padding-bottom使用元素本身的宽度来计算正确的值（此技术通常用于在响应式设计fyi上保持视频的正确长宽比）。

无论如何，我不建议使用空标记来进行样式设置：您的徽标应该是常规的img元素而不是背景，因为徽标通常可以传达信息

Answer 2

在这里找到答案： 如何获取div高度以自动调整为背景大小？

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

Answer 3

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

我要做的就是直接使用标记将图像放入div中。 如果需要其他内容，可以将内容放在现有div内的另一个div中。 然后可以将内部div的位置设置为绝对等，希望它能让您知道如何操作