CSS 图像尺寸不正确答案

【问题标题】：CSS image not properly sizedCSS 图像尺寸不正确
【发布时间】：2021-02-06 15:48:44
【问题描述】：

我的网站上有这个视差图像（大自然图像） This is how the page is normally seen

但它的大小不合适。当我打开 chrome 开发工具时，它看起来像下图，这就是我想要的样子。 this is the image how it needs to be (the nature image)

所以我想要什么：我希望在上面的图片中看到的自然图像显示为第二张图片中的样子（使用 devtools）。我知道图像的尺寸不适合盒子。但我不知道如何解决，也无法在 Internet 上找到相关内容。

有人可以帮助我吗？如果我的问题不够清楚，请回复我应该补充的内容！

我的 CSS 代码附加到图像视差：

 .header{
        background-image: url("nav-bg.png"); //The background image
        border-bottom-right-radius: 20px;
        border-bottom-left-radius: 20px;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
    }
    
    .parallax-2 {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

HTML 代码：

<div class="header parallax-2">
        <div class="logo fade-in-3"><img src="logo.png" alt="BeldrProductions" width="500"></div>
        <!-- The nav-items go here. but i left them out to save space-->
</div>

希望尽快看到你的答案！贝尔德尔

注意：以下答案的建议：

背景尺寸：包含不重复；（不起作用）
object-fit：包含和 object-fit：cover（不起作用）
宽度和高度 100%（不）

我在 JSfiddle 上的代码：https://jsfiddle.net/BeldrProductions/k5f70dy9/

【问题讨论】：

你试过把它作为背景图片吗？如果不是，则将其作为 bg 并使用属性 background-size: contains no-repeat;并查看结果。
不起作用。它下面的文本移动了一点，但仅此而已。图像还是一样的
尝试在你的图像类中添加 object-fit: contains 和 object-fit: cover
不，还是一样。
您尝试过修复图像大小吗？高度：100%；（根据div）和宽度：100%；

标签： html css image

【解决方案1】：

您必须将背景图像容器包装在另一个 div 中。检查 HTML、CSS sn-ps 以及屏幕截图。

<body>
    <div class="header">
      <div class="parallax-2">
        <div class="logo fade-in-3">
          <img src="logo.png" alt="BeldrProductions" width="500" />
        </div>
      </div>
      <!-- The nav-items go here. but i left them out to save space-->
    </div>
</body>

 <style>
  .header {
    height: 300px;
    width: inherit;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  .parallax-2 {
    height: inherit;
    width: inherit;
    background-image: url("nav-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
</style>

【讨论】：

link 不要认为这应该发生：/
没有办法改变图像的显示方式吗？我可以裁剪图像，但分辨率为 p**p。而且 bdw 的标志很好。我只需要改变背景

【解决方案2】：

感谢所有帮助过我的人。但我只是在没有图像的情况下使用它

谢谢，再见！

如果还有人有解决方案。请把它留在下面。我很想看看。

【讨论】：