웹 페이지에서 이미지가 다양한 화면 크기에 맞춰 자동으로 조절되도록 하려면 반응형(Responsive) 스타일을 적용해야 합니다. 방법은 매우 간단하며, 두 가지 CSS 속성만 설정하면 됩니다.
반응형 이미지의 핵심 원리
먼저 <img> 태그로 이미지를 추가한 뒤, CSS에서 다음 두 속성을 지정합니다.
- height: auto; — 이미지의 세로 비율이 가로 크기 변화에 따라 자동으로 유지됩니다.
- max-width: 100%; — 이미지가 부모 요소(또는 화면)의 너비를 초과하지 않도록 제한합니다.
즉, 인라인 스타일로 표현하면 다음과 같습니다.
style="height:auto;max-width:100%;"
반응형 이미지 예제 코드
아래 코드를 실행하면 HTML에서 반응형 이미지를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head></head> <body> <img src="https://www.tutorialspoint.com/images/video_tutorial_intro.jpg" alt="Video Tutorials" style="height:auto;max-width:100%;"> </body> </html>
실행 결과
위 코드를 실행하면 이미지가 화면 너비에 맞게 표시됩니다.
반응형 여부 확인 방법
이미지가 실제로 반응형인지 확인하려면 브라우저 창 크기를 조절해 보세요. 창 크기에 따라 이미지가 자연스럽게 줄어들거나 늘어난다면, 해당 이미지는 올바르게 반응형으로 설정된 것입니다.
추가 팁: 외부 CSS 활용하기
여러 이미지에 일괄 적용하고 싶다면 인라인 스타일 대신 CSS 클래스를 사용하는 것이 좋습니다.
img.responsive {
height: auto;
max-width: 100%;
}<img src="image.jpg" alt="설명" class="responsive">
이렇게 하면 코드 관리가 쉬워지고, 사이트 전체의 이미지에 일관된 반응형 동작을 적용할 수 있습니다.