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

codepen上的示例:http://codepen.io/anon/pen/EnJvI

注意:您不能简单地使用,height: 6.25%因为高度将相对于父元素的高度(body元素,其高度未定义0,因为您的徽标元素为空).

的padding-bottom,而不是元件本身的宽度使用,以计算正确的值(这种技术通常被用来保持对自适应设计视频正确的纵横比,仅供参考).

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