Html 如何显示完整的背景图像文件

我遇到了无法显示完整背景图像的问题

代码如下。 我认为它能起作用，但不起作用。 仅基于行数显示图像

请告诉我如何显示全尺寸图像

测试
a

A.

重新思考您的问题后，我认为最好的方法是不要使用背景图像。如果将图像作为常规内容放置到容器中，该容器将扩展到图像的完整大小

然后，您可以为其余内容创建另一个容器，并将该内容浮动到图像上

结果是完整大小的图像，上面有其他内容，您不必担心重复图像或纵横比

测试
#父项{边框：1px纯黑色；}
.测试{
浮动：左；
}
a

A.
更多内容

如果要查找完整的背景图像，且整个图像在元素中可见，则需要使元素与背景图像的纵横比匹配。否则，元素的高度/宽度将与其内部内容相同。如果您有图像尺寸，可以在父元素的伪元素上使用填充或填充来重新创建图像的纵横比，那么div将始终是图像的相同纵横比，显示整个内容，而不是仅显示基于内容的内容

要重新创建纵横比，请将图像的高度除以宽度（在我的示例中为800/1200），再乘以100得到一个百分比（66.6666%），并将其作为父对象的

填充底部或父对象的伪元素应用


正文{
保证金：0；
}
div{
背景：url（'http://weknowyourdreams.com/images/monkey/monkey-04.jpg'）0 0无重复/覆盖；
身高：0；
垫底：66.6667%；
颜色：白色；
}

a

A.
尝试使用

img {
  width: 100%;
  max-width: 100%;
  height: auto;
}

你只需要：'background:
url（contents01\u left\u bg.png）和
背景尺寸：封面<代码>背景大小
在任何地方都受支持，不需要供应商前缀。您也不应该在CSS样式表中使用HTML注释语法。背景图像的尺寸是多少？@MichaelCoker这不重要，因为
背景大小：cover
。来自MDN：“图像”覆盖“容器的整个宽度或高度”。@ScottMarcus好吧，如果你有图像尺寸，你可以在父元素的伪元素上使用填充或填充来重新创建图像的纵横比，那么div将始终与图像的纵横比相同，显示整个内容，而不是仅根据内容显示内容。@MichaelCoker我相信，即使取消了纵横比，
background size:cover
仍会强制它缩放到容器的大小。所以，你可能会得到一个扭曲的图像，但你仍然应该看到它的全部。谢谢你的快速和礼貌的回应！！我的问题已通过您的代码解决。感谢您的快速礼貌回复！！我的问题已经通过Michael Coker先生的代码解决了。但我发现你的代码也可以解决我的问题。这更好，因为我不必担心纵横比@西本至秀 请投票选出所有有帮助的答案，并将最好的一个标记为“正确”答案。祝你好运