调整背景图像大小以适合 div [重复]

Posted 2023-05-08

【中文标题】调整背景图像大小以适合 div [重复]

【英文标题】：Resize background image to fit div [duplicate]

【发布时间】：2012-07-19 02:09:08

【问题描述】：

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

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

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

http://mijn-webwinkel.nl/test2.php

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

我已经在网上搜索了一个好的解决方案。有几种 CSS 悬停效果的解决方案（但都需要背景图像）和一些在 div 内调整大小的解决方案（但它们都需要使用非背景图像）。

有没有将两者结合的解决方案？

【参考方案1】：

背景尺寸：封面；

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

【参考方案2】：

这行得通吗？

http://jsfiddle.net/kcWQf/1/

这 3 张单独的图像只是为了显示您已调整大小。