Question

我的网站上有这个视差图像（大自然的那个） 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>

希望尽快看到您的答复！贝尔

注意：来自以下答案的建议：

background-size：包含不重复；（不起作用）
object-fit：包含和 object-fit：cover（不起作用）
宽度和高度 100%（不）

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

Answer 1

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

<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>

Answer 2

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

谢谢，再见！

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

CSS 图像大小不正确

2 个答案: