时间戳

首页 > 解决方案 > CSS 图像尺寸不正确

html - CSS 图像尺寸不正确

问题描述

我的网站上有这个视差图像（大型自然图像） 这是页面通常的显示方式

但它的大小不合适。当我打开 chrome 开发工具时，它看起来像下面的图像，这就是我想要的样子。 这是应有的形象（自然形象）

所以我想要的是：我希望在上面的图片中看到的自然图像显示为第二张图片（使用 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>

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

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

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

标签： htmlcssimage

解决方案

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

谢谢再见！

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

推荐阅读