jquery - 如何在所有浏览器尺寸下调整我的 CSS 图像

Question

我是一名开发新手，正在尝试完成我的类(class)后的第一个元素(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;
}

我也搞砸了 height: 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%;}