그누보드 - [CSS]background-image에서 max-width 효과 주기

[CSS]background-image에서 max-width 효과 주기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

[CSS]background-image에서 max-width 효과 주기 정보

[CSS]background-image에서 max-width 효과 주기

본문

이것도 팁자료실에 올려도 될지 모르겠네요.
아마 디자이너분들이나, 고수님들은 아시겠지만...

저의 경우는 img에 max-width 효과만 주다가...
막상 background에서 그 기능을 사용하려니...
반응이 없어서 사실 고생을 좀 했었거든요.

주로 저의 경우는 속성이라고 해봐야...
background-image 혹은 repeat 정도만 사용해서 몰랐지만...
그래서 좋은 정보 공유하고자 올려보네요.

--------------------------------------------------------------------------------------------
background-size : x px, y px;
지정한 크기로 배경 이미지 적용

background-size : x %, y %;
지정한 % 비례하여 배경 이미지 적용

background-size : cover;
이미지 크기 비율을 그대로 유지한 상태에서 이미지가 속 한 엘리먼트의 가로 또는 세로에 이미지를 맞춰서 적용

background-size : contain;
이미지 크기 비율을 그대로 유지한 상태에서 원하는 영역에 가장 작은 크기로 이미지 스케일을 조정한다.

background-size : auto;
---------------------------------------------------------------------------------------------

현재 저는 cover를 이용해보니, 제가 원하는게 갖춰졌네요. ^^

댓글 5개

에카 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

13.04.28 00:43:14

size는 아마 제가 알기론 IE7이하부턴 안되는걸로 알고있습니다.
모든 브라우저에 맞추시려면 jQuery플러그인 중 vegas라는게 있으니, 그걸 사용하시는걸 추천합니다

cshop2 홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

홈페이지 자기소개 아이디로 검색 전체게시물 회원게시물

13.05.01 13:02:25

이런 것 까지 jQuery 남발은 좀 그렇죠... 더구나 플러그인을요???? -..-;;

ㅈ 가튼 IE, 멍청한 IE 는 background-size : cover; 이거도 못 알아먹어요. 관스틴님이 잘 모르시는듯. IE8 이하에서는 안먹죠.... 암튼 그렇다고 jQuery 먹이는거는 아니고... (넘 무겁잖아요.)

이게 가장 좋은 방법입니다.

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='xyz.png',sizingMethod='scale')";

더 좋은 방법은 MS 본사를 핵폭격 하는걸텐데.... 하다못해 빌게이츠 이 열여덜넘 이라도 쏴죽여야 하는데.. (지운아빠님이 작년에 빌게이츠 죽이러 간다고 방방 뜨시더니 맘이 바뀌셨나.....)