<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">