如何在所有浏览器大小下调整 CSS 图像的大小

Question

我是一名新手开发人员，并且正在尝试完成课程后的第一个项目 (Omnifood - Udemy)，因此我正在尝试将 Omnifood 项目改造成我自己的项目。

我的问题是我正在尝试使用几张封面图片，以便我可以给客户一个选择。然而，其中一张图片顽固地拒绝在不被裁剪的情况下放入浏览器。

当我缩小浏览器窗口时，这个问题就消失了；这让我觉得这可能是 Jquery 的事情。我将粘贴我的代码，然后粘贴我尝试过的修复以及在这些修复期间会发生什么。

原始代码 - 图片被裁剪

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
url(images/IMG_1650.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;

}

修复 #1 - 80% 的图像现在适合​​，但是要平铺，不要重复使用；停止平铺，但是现在页面周围有空格

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
url(images/IMG_1650.jpg);
background-size: 80%;
background-position: center;
height: 100vh;
background-attachment: fixed;
background-repeat: no repeat;

}

修复 #2 - 这会将整个图像放在那里，但是现在我有水平灰色边框。如果我的线性渐变延伸到覆盖边界，这对我有用。

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), 
url(images/IMG_1650.jpg);
background-size: contain;
background-position: center;
height: 100vh;
background-attachment: fixed;
}

我也搞砸了高度：vh 无济于事。而且我已经在照片编辑器中调整了实际图像的大小，并对其进行了裁剪，但也完全无济于事。

所以我想我的问题是；

1. 我可以让图片以全宽很好地适合页面吗？

2. 考虑到这个问题是在调整浏览器窗口大小时发生的，这是否意味着它是 Jquery 的事情？

How it should look

How it does look

Answer 1

删除你的标题 css 并添加这些 css 并尝试它是如何工作的

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://s6.postimg.org/gv6ctlskh/IMG_1650_R.jpg);
height: 100vh;
background-attachment: fixed;
background-position: center;
background-size: 100% 100%;}