CSS를 사용하여 브라우저 크기에 따라 이미지 크기를 자동으로 조정

브라우저 창 크기를 조정할 때 이미지 크기가 자동으로 조정되기를 원하지만 제공된 코드 작동하지 않습니다. 해결책을 조사해 보겠습니다.

이미지를 유연하게 만들려면 max-width: 100% 및 height: auto를 추가해야 합니다. 그러나 IE8에는 이것이 작동하지 않는 버그가 있습니다. 이 문제를 해결하려면 IE8의 경우 width: auto\\9를 추가하세요.

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

img 태그를 사용하여 추가된 모든 이미지는 이제 자동으로 크기가 조정됩니다.

설명하기 위해 다음은 JavaScript가 필요하지 않은 JSFiddle의 예입니다. 최신 버전의 Chrome, Firefox, IE와 호환됩니다(테스트 기준).