为何给div添加图片（含CSS背景图）时无内容则无法显示？

哈哈这个问题我太熟了！之前做项目的时候踩过好几次坑，核心原因其实和div这个块级元素的默认特性脱不了干系，咱们掰开揉碎了说：

1. div的默认尺寸逻辑是核心 #

div是块级元素，它的默认规则是：宽度会自动占满父容器的可用空间，但高度完全是靠内部内容“撑”起来的——如果div里空无一物（没有文本、子元素、甚至没有空格），它的高度会直接变成0（或者几乎可以忽略的高度）。

• 要是你给div加的是CSS背景图：容器高度为0的话，背景图根本没有可展示的区域，自然就看不到了；只有当内部有内容撑开高度，或者你手动给div设置了宽高，背景图才有地方显示。
• 要是你是在div里嵌套了<img>标签：理论上img本身是有尺寸的替换元素，应该能直接撑开div，但如果你的CSS里给div加了特殊样式（比如overflow:hidden但没设置高度，或者父元素有奇怪的布局规则），也可能导致div高度塌陷，看起来像是只有加文本才显示img——不过这种情况比较少见，最普遍的还是背景图的场景。

2. 直观例子对比 #

看不到背景图的情况 #

<div style="background-image: url('your-image.jpg');"></div>

这个div没有任何内容，高度为0，背景图完全没地方展示。

能正常显示的情况 #

要么靠内容撑开：

<div style="background-image: url('your-image.jpg');">随便写点什么都能撑开高度</div>

要么手动设置宽高：

<div style="background-image: url('your-image.jpg'); width: 300px; height: 200px;"></div>

3. 不用内容也能显示的解决办法 #

如果不想靠文本/内容撑容器，这几个方法很实用：

• 直接给div设置固定的width和height值；
• 用min-height设置最小高度，保证容器至少有足够空间展示图片；
• 做响应式背景图的话，可以用padding-top按比例撑开容器（比如padding-top: 75%;对应16:9的图片比例），再配合background-size: cover来适配。

内容的提问来源于stack exchange，提问作者cool breeze