웹에서 Responsive Image(반응형 이미지) 구현하기

반응형 이미지는 어떻게 구현할까?

---

웹에서 고정된 크기를 가진 이미지를 데스크탑, 랩탑, 태블릿, 스마트폰 등 다양한 기기마다 최적화된 형태로 출력하려면 어떻게 해야할까? 해답은 간단하다. 반응형으로 출력하고 싶은 이미지의 img 엘러먼트에 style 애트리뷰트를 아래와 같이 부여하면 된다.

HTML에서는 아래와 같이 부여한다.

<img src="someImage.jpg" style="max-width: 100%; height: auto;">

CSS에서는 아래와 같이 부여한다.

img
{
  max-width: 100%;
  height: auto;
}

JavaScript에서는 아래와 같이 부여한다.

var img = document.getElementsByTagName("img");
vat i=0;
while (i < img.length) {
  img[i].setAttribute("style", "max-width: 100%; height: auto;");
  i++;
}

키워드: Responsive Image, 반응형 이미지