文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS图像大小不适当

问CSS图像大小不适当
EN

Stack Overflow用户

提问于 2021-02-06 15:48:44

回答 2查看 96关注 0票数 0

我在我的网站(大型自然图片) 通常情况下，页面是这样的。上有这张图片

但它的尺寸不合适。当我打开chrome工具时，它看起来像下面的图像，这就是我希望它成为的样子。这就是它所需要的图像(自然图像)

所以我想要的是:我希望在上面的图片上看到自然图像，就像在第二张图片中(与devtools)一样。我知道图像对盒子的大小不合适。但是我不知道怎么解决它，也在网上找不到东西。

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

我的CSS代码附加到图像-paralax：

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

希望很快就能看到你的回答！贝尔德尔

注:建议如下：

背景尺寸:不重复；(不起作用)
对象匹配:包含和对象匹配:掩护(不起作用)
宽度和高度100% (不)

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

html

css

image

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-08 08:00:47

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

谢谢，再见！

如果还有人有解决办法的话。请把它放在下面。我很想看看。

票数 0

Stack Overflow用户

发布于 2021-02-06 16:31:56

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66078761

复制

相似问题

问CSS图像大小不适当
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图像大小不适当EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS图像大小不适当
EN