왜 IE10 에서는 이미지 태그의 width, height 속성으로 원본의 크기가 자동으로 들어가는가?

요약: IE10 이하에서는 동적으로 이미지 태그를 DOM에 추가할 때, 그 이미지 태그의 width 와height 속성에 이미지의 본래 크기가 자동으로 설정된다.

IE10 이하 브라우저에서만 이미지 태그에 width, height 속성이 자동으로 설정되어 이미지가 올바르게 노출되지 않던 문제와 원인을 공유하고자 한다.

브라우저 IE10 와 Chrome 에서 아래의 html 파일을 열어보자.

// IE11, 크롬 등 최신 브라우저에서 결과
<img src="https://cdn.011st.com/11dims/resize/128x128/quality/75/11src/browsing/banner/2019/11/21/12937/2019112115432102791_0_1.png">
// IE9, IE10 브라우저에서 결과
<img src="https://cdn.011st.com/11dims/resize/128x128/quality/75/11src/browsing/banner/2019/11/21/12937/2019112115432102791_0_1.png" width="128" height="128">

IE10 이하에서는 동적으로 이미지 태그를 DOM에 추가할 때, 그 이미지 태그의 width 와height 속성에 이미지의 본래 크기가 자동으로 설정된다. 이 특징이 이미지의 모양이 깨지는 이슈를 발생시킬 수 있다. 아래의 CSS가 포함되었다고 가정하자.

img.target {
   width: 64px;
}

IE11 이상 브라우저에서는 이미지의 비율에 맞게 height 또한 64px로 정해져서 64x64로 올바르게 노출될 것이다. height 기본 값으로 ‘auto’ 가 있기 때문이다.

하지만 IE10 이하 브라우저에서는 위의 특징 때문에 속성 스타일이 적용된다. 그래서 이미지의 비율이 깨진 64x128 크기의 모습으로 노출된다.

img[Attribute Style] {
   width: 128px;
   height: 128px;
}

그러므로 이러한 경우, CSS에서 style.height 의 값을 ‘auto’ 값으로 명시해줘야한다.

img.target {
   width: 64px;
   height: auto;
}

이미지 태그의 width 와 height 스타일 모두 항상 설정해주면 이러한 이슈를 피할 수 있다. 자세한 설명은 이미지 태그의 width, height 스타일이 모두 명시되어야 하는 이유 에서 확인할 수 있다.