2012-07-19 40 views
2

我对调整背景图像大小有疑问。我有一个div,它的长度根据网页的查看设备而有所不同。将背景图像调整为适合div

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

我也有一个图像是600px * 600px。我想适应这个形象来填补完全保留长宽比的div。然后,当用户将鼠标悬停在图像上时,我想创建一个悬停效果。这是悬停效果我想:

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

(不介意在右边的文本 - >这是只用于测试)

...我已经寻找一个好的解决方案的网络。有几种解决方案用于CSS悬停效果(但都需要背景图像),还有几种解决方案可以在div中调整大小(但它们都需要使用非背景图像)。

是否有解决方案来结合两者?

回答

3

background-size:cover;

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