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无济于事。我已经在照片编辑器中调整了实际图像的大小，然后裁剪它，也完全无济于事。

所以我猜我的问题是;

我可以让图片在整个页面内很好地适应页面吗？
考虑到调整浏览器窗口大小时会出现此问题，这是否意味着它是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%;}

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

1 个答案: