CSS에서 백분율(%)로 이미지 높이와 너비 설정하기

CSS에서 백분율(%)로 이미지 크기 설정하기

CSS에서는 이미지의 height와 width 속성에 픽셀(px) 대신 백분율(%) 값을 사용할 수 있습니다. 백분율로 크기를 지정하면 이미지가 부모 요소(컨테이너)의 크기를 기준으로 상대적으로 조절되기 때문에, 화면 크기에 따라 유연하게 변하는 반응형 웹 디자인을 구현할 때 특히 유용합니다.

아래 예제처럼 스타일시트에서 img 선택자에 height: 50%와 width: 50%를 적용하면, 이미지가 부모 요소 너비와 높이의 절반 크기로 표시됩니다.

예제 코드

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            height: 50%;
            width: 50%;
         }
      </style>
   </head>
   <body>
      <p>백분율(%)로 크기가 조정된 이미지</p>
      <img src = "https://www.tutorialspoint.com/videotutorials/assets/videos/courses/155/images/course_155_image.png" alt = "CSS" width = "200" height = "200">
   </body>
</html>

참고 사항

백분율 값은 항상 부모 요소의 크기를 기준으로 계산됩니다. 부모 요소의 크기가 명확하지 않으면 의도한 대로 표시되지 않을 수 있습니다.
HTML 속성인 width와 height보다 CSS 스타일이 우선 적용되므로, 위 예제에서는 CSS의 50% 값이 최종 크기를 결정합니다.
반응형 이미지를 만들 때는 max-width: 100%를 함께 사용하면 이미지가 컨테이너를 벗어나지 않도록 할 수 있습니다.