유동적으로 변하는 사이즈 만들기 ~~!
앵초
이해를 위해서 아래에 이미지 첨부합니다.
창크기에 따라 안에 있는 분홍색 박스의 크기가 늘어나게하려면 %를 사용하면 됩니다만..
이미지가 비율에 맞지않게 쪼그라들거나 좌우로만 늘어나서 깨지는등의 문제가 발생합니다..
어떻게해야 효과적으로 이미지 크기를 유동적으로 변하게 할 수 있을까요?
-
무들
아 해결됫군영........
-
꽃
비례식을 이용하면 뭔가 되지않을까영?
-
Emily
아주 잘되내요 ~~ 제가 멍청이였군요 ~~
-
마리
말이 되내요 - ㅅ-;; 감사합니다
-
그리
이미지에 높이를 주지 마시고 넓이만 줘서 한번 확인해 보세요~
-
꿈빛
%만줘서 자동으로 된다는게 말이 안되요..
%라는게 이미지의 사이즈를 기준으로 이미지가 바뀌는게 아니라
부모 엘리먼트에 의해서 사이즈 바뀌는데..
이미지 사이즈는 300 * 300인데.. img size 100% 100%하면
만약에 부모가 body였으면 그거 이미지 그냥 열어놓은 창에서 100%라서 이미지 사이즈 비율 전혀
고려하지않고 늘어나버립니다.
아마 $(window).height(), 현제 돔트리에있는 img size가지고 실시간으로 -
놓아줄게요
그냥 넓이만 %로 주시면 자동으로 된다니깐요~ 스크립트 안돌려도~
-
월향
깨지는건 상관없어요 이미지를 고해상도로 불러놓을꺼기때문에.. 다만 스케일 비율에 맞게 늘리는거에 대한걸 모르겠어서요
-
초코향
당연히 좌우로 움직이면 50%의 넓이로 늘리면 그만큼 이미지도 늘어나기 때문에 어느정도 창을 늘리면 이미지가 깨지는 것은 당연합니다. 왜냐~ 이미지는 비트맵방식이니까요.
그리고 위와같은 홈페이지를 보니까 좌우로 움직였을 때 어느정도 넓이를 넘어가면 더이상 커지지 않죠?
그러니까 이미지의 최대 넓이가 1200이라고 쳤을 때 if조건문으로 그 이상으로 커지지 않게 만들라는 거에요.
좌우로 줄였을 때 높이에 영향을 받는건 그냥 img에 넓이만 %로 잡아주 -
아이돌
%를 사용하는데 왜 좌우로만 늘어날까요??
width:OO%를 주면 높이도 비율에 맞게 늘어날텐데;;