<img> 태그

<img> 태그에서 width 및 height 속성을 설정하면 레이아웃 변경을 방지하는 데 도움이 됩니다. 이 정보를 통해 브라우저에서 이미지를 위한 올바른 크기의 공간을 예약할 수 있습니다.

  • width 및 height 속성 설정: 이러한 속성의 값은 이미지가 표시되는 크기가 아니라 이미지 자체의 크기 (즉, 기본 크기)와 일치하도록 설정해야 합니다.

  • 필요에 따라 이미지 스타일 지정 조정: 이미지의 기존 스타일에 따라 width 및 height 속성을 추가하면 이미지가 다르게 렌더링될 수 있습니다. 대부분의 경우 기존 스타일 지정에 height: auto 또는 width: auto를 추가하여 이 문제를 해결할 수 있습니다.

이전 CSS 스타일 다음으로 변경
img { width: 100%; } img { width: 100%; height: auto; }
img { max-width: 100%; } img { max-width: 100% height: auto; }
img { height: 100%; } img { height: 100%; width: auto }

HTML

<img width="267" height="400" src="dog.jpg">