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; 
}

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

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

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

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

Answer 2

在此处找到答案：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>

Answer 3

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

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

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

3 个答案: