完整图像未在背景中显示答案

【问题标题】：Full image is not showing in the background完整图像未在背景中显示
【发布时间】：2022-02-08 19:19:37
【问题描述】：

我有一张想要完全显示为背景图片的图片。

如下图所示，女孩和狗并没有完全显示出来：

原图

是否有任何 css 属性可以完全将图像作为背景？还是我必须调整图像大小？

这是我的 CSS：

*{
      margin: 0;
      padding: 0;
}
body{
      background-image: url('../public/images/bg0.jpg');
      height: 100vh;
      background-repeat: no-repeat;
      background-size: cover;
      object-fit: contain;
      transition: background-image 1.5s linear;
}
#__next{
      height: 100%;
}

【问题讨论】：

既然您已将其标记为next.js，您是否使用next/image 组件来渲染图像？如果是这样，您能否也提供该代码？

标签： html css next.js

【解决方案1】：

您正在使用 background-size: cover;，因此图像将尝试使其自身适应元素。您可以将属性更改为 background-repeat:no-repeat; background-size:contain;。

或

使用background-position: bottom。

我希望这能解决你的问题。

检查这个 W3 了 background-size background-image

【讨论】：

【解决方案2】：

使用“背景尺寸：封面；”浏览器将扩展背景照片，使其覆盖整个网站主体。您可以使用“背景尺寸：包含；”看到整个图像，但它不会覆盖整个网站。最好的解决方案是调整图像大小。

【讨论】：