2012-07-19 3 views
2

배경 이미지 크기 조정에 대한 질문이 있습니다. div가 있으며 길이는 웹 페이지가 표시되는 기기에 따라 다릅니다.div에 맞게 배경 이미지 크기 조정

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

또한 600px * 600px의 이미지가 있습니다. 이 이미지를 종횡비로 완전히 채우려면이 이미지를 맞추고 싶습니다. 그런 다음 사용자가 이미지 위로 마우스를 가져 가면 호버 효과를 만들고 싶습니다.

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

(오른쪽의 텍스트를 신경 쓰지 않는다 ->는 테스트에만)

내가 좋은 솔루션을위한 웹을 검색 한

:이 내가 원하는 마우스 오버 효과입니다. CSS 호버 효과 (그러나 모두 배경 이미지가 필요함)와 div 내에서 크기를 조정하기위한 몇 가지 솔루션이 있습니다 (그러나 모두 배경 이미지가 아닌 것을 사용해야합니다).

둘 모두를위한 해결책이 있습니까?

답변

1

이 방법이 효과가 있습니까?

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

3 개 별도의 이미지는 크기를 조정할 것처럼 보여주기 위해 단지이다.

3

background-size : 표지;

배경 이미지의 크기를 조정하여