Html 缩放css网格中的图像，但宽度和高度会增加大小

我想缩放图像，因此它工作了。这没有任何问题，但我唯一的问题是我想应用

溢出

，但它也不工作

*{
填充：0；
保证金：0；
}
a{
文字装饰：无；
颜色：黑色；
字体系列：无衬线；
字号：600；
过渡：颜色125ms；
}
a:悬停{
颜色：#f8b500；
}
保险商实验室{
列表样式：无；
}
标题{
填充：4vh 7.5vw；
}
标题按钮{
显示：无；
}
收割台img{
左：1vw；
}
标题导航{
显示：内联；
}
标题导航ul{
显示：内联；
}
标题nav ul li{
显示：内联；
浮动：对；
填料：0.1.5vw；
垫面：5px；
}
主要{
宽度：85vw；
高度：80vh；
保证金：自动；
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
栅柱间隙：1vw；
栅排间隙：1vw；
}
main.bg-1{
背景：/*url（“images/slider-1-1200x900.jpg”）*/黑色无重复中心；
网格柱：1/3；
网格行：1/3；
}
main.bg-2{
背景：/*url（“images/slider-2-450x600.jpg”）*/绿色无重复中心；
网格柱：3/4；
网格行：1/1；
}
main.bg-3{
背景：/*url（“images/slider-3-450x600.jpg”）*/黄色无重复中心；
}
main.bg-4{
背景：/*url（“images/slider-4-450x600.jpg”）*/蓝色无重复中心；
}
main.bg-5{
背景：/*url（“images/slider-5-450x600.jpg”）*/灰色无重复中心；
}
main.bg-6{
背景：/*url（“images/slider-6-450x600.jpg”）*/红色无重复中心；
}
main.bg-1，
main.bg-2，
main.bg-3，
main.bg-4，
main.bg-5，
main.bg-6{
溢出：隐藏；
背景尺寸：封面；
过渡：350ms；
}
main.bg-1：悬停，
main.bg-2：悬停，
main.bg-3：悬停，
main.bg-4：悬停，
main.bg-5：悬停，
main.bg-6：悬停{
变换：比例（1.1,1.1）；
}

将图像用作伪元素，溢出将起作用：

*{
填充：0；
保证金：0；
}
a{
文字装饰：无；
颜色：黑色；
字体系列：无衬线；
字号：600；
过渡：颜色125ms；
}
a:悬停{
颜色：#f8b500；
}
保险商实验室{
列表样式：无；
}
标题{
填充：4vh 7.5vw；
}
标题按钮{
显示：无；
}
收割台img{
左：1vw；
}
标题导航{
显示：内联；
}
标题导航ul{
显示：内联；
}
标题nav ul li{
显示：内联；
浮动：对；
填料：0.1.5vw；
垫面：5px；
}
主要{
宽度：85vw；
高度：80vh；
保证金：自动；
显示：网格；
网格模板列：重复（3，1fr）；
网格模板行：重复（3，1fr）；
栅柱间隙：1vw；
栅排间隙：1vw；
}
主要部分{
位置：相对位置；
z指数：0；
}
主要部分：：之前{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
z指数：-1；
背景：var（--i）；
}
main.bg-1{
--i:url(https://picsum.photos/id/1060/800/800)无重复中心；
网格柱：1/3；
网格行：1/3；
}
main.bg-2{
--i:url(https://picsum.photos/id/1024/800/800)无重复中心；
网格柱：3/4；
网格行：1/1；
}
main.bg-3{
--i:url(https://picsum.photos/id/1018/800/800)无重复中心；
}
main.bg-4{
--i:url(https://picsum.photos/id/1024/800/800)无重复中心；
}
main.bg-5{
--i:url(https://picsum.photos/id/101/800/800)无重复中心；
}
main.bg-6{
--i:url(https://picsum.photos/id/107/800/800)无重复中心；
}
主要部分{
溢出：隐藏；
}
主要部分：：之前{
背景尺寸：封面；
过渡：350ms；
}
主要部分：hover:：before{
变换：比例（1.1,1.1）；
}