• TL;DR

<img src="url of an image of 1000x500 size" style="width: 500px;">

위와 같이 style.width 만 정해도 대체로 문제가 없습니다. width, height style의 기본 값이 auto이기 때문입니다. style.width만 지정하면, 이미지가 로드된 이후 원본의 비율에 맞게 height 영역이 250px로 계산되어 보여지게 됩니다.

그래서 가끔 이미지의 CSS에서 width, height style 중에 하나만 지정하는 경우를 볼 수 있습니다.

하지만 style에 하나의 속성만 지정되고, img 태그에 width, height 속성이 지정된 경우, 문제가 생기게 됩니다.

우선 width, height 속성과 width, height style 을 구분할 필요가 있습니다.

• img태그 속성은 HTMLImageElement의 속성으로 원본 이미지의 크기를 값으로 가지는 것을 권장합니다.
• img 태그 Style은 화면에 표시될 영역의 크기를 나타냅니다.

<img 
	src="<https://ncc-phinf.pstatic.net/20141022_178/1413936226036VMWBA_JPEG/1.jpg?type=w646>" 
	width="646"
	height="431" 
	style="width: 150px">
<!-- 
	img 태그 속성: width: 646, height 431
	img 태그 스타일: width: 150px
-->

고민할 문제

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

img {
	width: 150px; /* style.width */
}

위의 이미지에서 style.width 만 지정하니 이미지 비율이 깨진 결과를 확인할 수 있다. 이는 Attribute Style이 적용되어 style.height의 경우 기본 값 auto를 431px로 덮어쓰기 때문입니다.