웹에서 이미지 반응형으로 구현하기

웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 방법이다.

HTML5에서는 아래와 같이 사용한다.

<img src="이미지 경로" style="max-width: 100%; height: auto;">

예를 들어 본인의 이미지가 images/pic01.png에 있다면 

<img src="images/pic01.png" style="max-width: 100%; height: auto;">

위와 같이 설정할 수 있다.

		수정 전
		수정 후

참고로 CSS에서는 아래와 같이 사용한다.

img {

max-width: 100%;

height: auto;

}