CSS3 백그라운드 이미지(background-image) 사이즈 비율에 맞게 조정하기

적용 예

 

이게 원본 이미지의 사이즈 (사이트 내의 상세설명 페이지에서 캡쳐함)

 

이게 리스트에서 보여지는 모습.

위에있는 이미지나 아래에 있는 백그라운드나 같은 파일을 불러오고 있는것.

위 예시에서는

가로는 div의 사이즈에 맞게 비율만 줄어들어서 전부 나오고

세로는 가로의 비율에 맞게 나오다가, div영역 사이즈를 초과하면 알아서 멈춤.

 

style="width:296px; height:152px; background-image:url('장나라'); 
-ms-behavior: url('/css/backgroundsize.min.htc'); 
background-size:cover; background-repeat:no-repeat;"

-ms-behavior: url('/css/backgroundsize.min.htc'); 를 안넣으면 IE8 이하 CSS3 미지원 브라우저에서는 작동 안됨.

넣으면 IE8/IE9/파폭/크롬 -> 되는거 확인. 사파리-> 될 것으로 추정. IE6 -> 여기는 그래도 안되는거 확인

backgroundsize.min.htc 파일 다운로드 경로

https://github.com/louisremi/background-size-polyfill  

 

다운로드 링크 없어졌으면 아래 첨부파일 다운로드

background-size-polyfill-gh-pages.zip