모바일에서 이미지 크기를 div, span, td 등에 폭 맞추기

img { max-width:100%; }

* { max-width:100%; }

처음엔 이렇게 했었는데 swipe가 작동 안 한다는 걸 알았습니다. 이것 때문에 한참을 애먹었는데 div를 옆으로 드래그 하면 숨은 영역까지 브라우저를 확장해 크기를 100%로 계속 늘리기 때문에 swipe가 안 되는 거였습니다.

그런데 가끔 큰 이미지를 스마트폰 화면 폭에 맞춰야 할 때가 있는데 디바이스 크기가 제각각이라 이미지를 디바이스 폭에 맞춰 JS로 고정 시키는 방법이 있지만 max-width를 쓰면 간단하게 해결이 됩니다.

img를 감싸고 있는 틀에 이미지 폭을 맞춥니다.

이 때는 img 태그의 width, height 속성은 무시하게 됩니다.

반대로 min-width:400px; 이렇게 하면 폭이 400px 미만으로는 줄어들지 않게 됩니다. 반응형에서 자주 사용되는데 브라우저 폭을 줄여나가면 PC 화면이였다가 모바일 화면으로 줄어들다가 어느 한 지점에서 폭이 고정 되는 걸 볼 수 있습니다.