Html 使背景图像适合flex容器

我使用flexbox创建了一个网格，允许3个图像并排对齐。我给了它们33.333%的宽度，所以它们正好合适

不过，现在我想介绍一种css悬停效果，当您将鼠标悬停在图像上时，另一个图像会淡入

我的效果很好，但是我遇到的问题是，悬停时淡入的图像太大，因此只有大约75%的图像出现在容器中

我得到了淡入淡出效果的代码，但尽管我一直在操作代码，但我无法使图像完全适合容器。两幅图像的尺寸完全相同

.container{
显示器：flex；
柔性包装：包装；
}
.盒子{
弹性：1
}
伯德先生{
填充：0；
保证金：0；
-webkit框大小：边框框；
}
.crossfd{
背景：url（“https://picsum.photos/200/200?image=0");
显示：内联块；
背景尺寸：封面；
}
.crossfd img{
-webkit转换：不透明度1s易入易出；
-moz过渡：不透明度1s缓进缓出；
-o型过渡：不透明度1s缓进缓出；
过渡：不透明度1s缓进缓出；
}
.crossfd img：悬停{
不透明度：0；
}

---

尝试添加

背景尺寸：封面打开
.crossfd
类

您也可以尝试
包含
或
100%
，阅读上的规范

background size
CSS属性指定背景图像的大小。图像的大小可以完全约束，也可以仅部分约束，以保持其固有比率