반응형이미지를 만드는 여러가지 방법

SHARE

DEMO

먼저 아래 데모페이지를 확인해주세요.
브라우저 사이즈에 맞게 이미지 사이즈가 바뀌거나, 다른 이미지로 변경됩니다. 직접 늘렸다 줄였다 해보면서 확인해보세요~

DEMO

html

css

jQuery

이미지를 자동으로 화면에 맞게 리사이즈 되도록

이제는 흔하게 쓰이는 내용이기 때문에 모르는 분은 안계실거라 생각하지만, 어디까지나 모르는 분을 위해 정리하는 차원에서!
max-width:100%;로 지정하면 이미지가 부모요소로부터 삐져나오지 않도록 합니다. IE8에서는 옆으로만 늘어나는 버그가 있으므로, 3번째 줄에width /***/:auto;의 핵을 써줍니다. (슬슬 IE8 버려도 될 것도 같은데 일단은…)

html

css

이미지를 배경으로 지정하여 화면에 맞게 리사이즈 되도록

배경화면을 브라우저에 꽉차게 표시하기 위해서는 background-size:contain;로 배경 화면의 비율을 유지한 채로 표시하고 높이를 padding-top(또는 padding-bottom)으로 조정합니다.

높이의 계산 방법은 높이 ÷ 폭 × 100 입니다. 배경으로 적용한 이미지의 사이즈를 적용하면 500px ÷ 750px × 100 = 66.666…%입니다. 이를 응용하면 Youtube 등의 소스 코드에도 대응 할 수 있습니다.

html

css

작은 화면용으로 이미지를 체인지(CSS)

PC용과 스마트폰용의 이미지를 각각 준비하여, css의 미디어쿼리를 써서 이미지를 바꿔주는 방법입니다.
이미지를<img>로 그대로 표시하고, 브라우저 사이즈가 지정한 px보다 작아졌을 때 스마트폰용 이미지로 대체되어 표시됩니다.

html

css

작은 화면용으로 이미지를 체인지(jQuery)

이번에는 jQuery를 이용하여 이미지를 PC용, 스마트폰용으로 바꿔줍니다.
이미지에 switch라는 클래스명을 주고, 화면이 작아졌을 때 이미지를 변경하도록 jQuery에서 처리합니다.

html

jQuery

jQuery소스는 아래 사이트의 코드를 모셔왔습니다. (일본어)
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験

댓글

  1. 황세훈 댓글:

    안녕하세요 나나티님…
    이미지 리사이징으로 소스검색하다가 찾아오게 되었습니다.
    전 초보라서… 보통 이미지만 만들어서 이벤트페이지만 만드는데요.
    모바일에서도 잘 보일수 있게 해보려고 합니다.
    알려주신데로 했는데도 잘안되고 이해도 안되서요 ㅠㅠ

    • nanati 댓글:

      황세훈님 안녕하세요^^
      방문, 댓글 감사합니다.
      잘 모르시는 부분의 코드를 알려주시거나,
      적용하고 계신 사이트 주소를 알려주시면 확인해 드릴수가 있는데,
      어떤 부분이 이해가 안되시는지 댓글로 남기기 어려우시면
      프로필란의 메일주소로 보내주시기 바랍니다^^

  2. jhyun8794 댓글:

    정말 도움이 되었습니다~ ㅎㅎ

  3. 이상덕 댓글:

    그간지러운 부분을 씨게 긁어준듯한 이 기분!
    감사합니다. 잘보고 갑니다.

  4. beemarketer 댓글:

    와 진짜 최고입니다 !!!