CSS 图像大小不正确

时间:2021-02-06 15:48:44

标签: html css image

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

2 个答案:

答案 0 :(得分:0)

您必须将背景图像容器包装在另一个 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>

Image with full screen. Without dev tool

Image with dev tool open

答案 1 :(得分:0)

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

谢谢,再见!

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

相关问题