HTML에서 이미지 너비 설정하기

기본적으로 이미지는 실제 크기로 표시됩니다. 예를 들어, 위에서 출력한 웃는 얼굴 이미지는 실제 크기가 130 x 130 픽셀이며, 브라우저에서 보는 이미지 크기도 동일합니다.

원하는 경우 이미지의 너비를 설정하여 크기를 변경할 수 있습니다. 이것은 width 속성을 사용하여 수행됩니다.

예를 들어 우리 이미지의 너비를 100 픽셀로 설정해 봅시다. 이를 위해 width 속성 값으로 100 숫자를 지정합니다, 다음과 같이:

화면에 표시될 이미지 크기는 어떻게 될까요? 너비는 우리가 설정한 대로 100 픽셀이고, 높이는 설정하지 않았으므로 실제 높이인 130 픽셀일 것이라고 생각할 수 있습니다. 사실은 그렇지 않습니다.

너비는 실제로 100 픽셀이 되지만, 높이는 이미지 비율이 왜곡되지 않도록 조정되어 100 픽셀이 됩니다.

실행해서 확인해 봅시다:

: