新手上路，请多包涵

这是一个示例代码

我一直想知道为什么 background-image 不显示，除非我以像素为单位指定图像的宽度和高度。我试图仅以百分比的形式指定宽度，但没有用。 w3cschools.com 能够在不指定宽度和高度的情况下显示背景图像，但它仅适用于正文背景。有任何解释或解决方法吗？

HTML

 <div class="pic"></div>

CSS

 .pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 244px;
  height: 230px;
  background-size: contain;
}

原文由 Kristina Bressler 发布，翻译遵循 CC BY-SA 4.0 许可协议

html css

阅读 219

2 个回答

得票最新

社区维基

发布于
2022-12-20

✓ 已被采纳

多亏了 http://blog.brianjohnsondesign.com/maintain-aspect-ratio-for-html-element-using-only-css-in-a-responsive-design/ ，我找到了一个很好的替代方案而不指定高度。 HTML

 <div class="pic"></div>

CSS

 .pic {
  background: url("http://i.imgur.com/HIt6f8r.png") no-repeat;
  display: block;
  position: relative;
  width: 20%;
  height: 0;
padding-bottom: 20%;
  background-size: 100%;
}

假设它是一个正方形，您需要做的就是将 padding-bottom 与 css 中的宽度相匹配。

更新： 我还听说了另一种可能有用的解决方案。 http://www.mademyday.de/css-height-equals-width-with-pure-css.html

CSS

 .pic {
position: relative;
width: 50%;
}
.pic:before {
content: "";
    display: block;
    padding-top: 100%;
}

虽然我还没有测试过……

原文由 Kristina Bressler 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-20

您的 <div> 元素没有任何内容，因此 <div> 高度为 0px。

<div> 的宽度仍然是100%。

如果您向 div 添加任何内容，它将具有一定的高度，并且会显示一部分图像。

<body> 默认具有窗口高度，因此您可以看到背景图像。

原文由 Justinas 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

Stack Overflow 翻译

子站问答

访问

本篇内容翻译自 Stack Overflow，如果你觉得翻译结果值得改进，欢迎直接编辑修改，感谢你为社区贡献。

相似问题

找不到问题？创建新问题

为什么没有特定宽度和高度的背景图像不显示？

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译