Css 调整背景图像大小以适应div

我有一个关于调整背景图像大小的问题。我有一个div，它的长度取决于浏览网页的设备

PC: Div = 500px * 500px
Tablet: Div = 300px * 300px
Mobile: Div = 200px * 200px

我还有一个图像是600px*600px。我想适合这张图片，以填补div完全保持高宽比。然后，当用户将鼠标悬停在图像上时，我想创建一个悬停效果。这是我想要的悬停效果：

（不要介意右边的文字->它只用于测试）

我在网上搜索了一个好的解决方案。css悬停效果有几种解决方案（但都需要背景图像），还有几种用于在div中调整大小（但都需要使用非背景图像）

是否有一种将两者结合起来的解决方案？

这有效吗

这3张单独的图像只是为了显示，就好像您已经调整了大小一样。

这样行吗

---

这3张单独的图像只是为了显示，就好像您已经调整了大小一样。

背景尺寸：封面

---

用于调整背景图像的大小以适应背景大小：封面

用于调整背景图像的大小以适应