CSS의 height 속성은 이미지의 높이를 지정할 때 사용합니다. 이 속성에는 픽셀(px)처럼 고정된 길이 단위나 백분율(%) 값을 사용할 수 있으며, 백분율(%)로 지정할 경우 이미지가 포함된 부모 요소(박스)를 기준으로 높이가 계산됩니다.
예제
아래 코드를 실행하면 이미지의 높이를 직접 설정해 볼 수 있습니다.
<html> <head> </head> <body> <img style = "border:2px solid green; height:100px;" src="/css/images/logo.png" /> <br /> <img style="border:2px solid green; height:50%;" src="/css/images/logo.png" /> </body> </html>
코드 설명
첫 번째 이미지는 height:100px로 고정 높이를 지정했기 때문에 항상 100픽셀로 표시됩니다. 반면 두 번째 이미지는 height:50%로 지정되어, 이미지가 들어 있는 컨테이너(부모 요소) 높이의 절반 크기로 조절됩니다.
참고 사항
높이만 변경하면 원본 이미지의 가로세로 비율이 깨질 수 있습니다. 비율을 유지하고 싶다면 height와 함께 width에 auto를 지정하거나, max-height, object-fit 속성을 활용하는 것이 좋습니다.