调整背景图像的大小以适合div

Question

我有一个关于调整背景图片大小的问题。我有一个div，它的长度根据查看网页的设备而有所不同。

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

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

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

（不要介意右边的文字 - ＆gt;它仅用于测试）

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

是否有两种组合的解决方案？

Answer 1

background-size：cover;

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

Answer 2

这有用吗？

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

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