
w3.css
반응형 이미지
CSS를 사용하여 반응형 이미지를 만드는 방법을 알아보자.
반응형 이미지는 화면 크기에 맞게 자동으로 조정된다.
아바타 이미지를 만드는 방법
1단계) HTML 추가
<img src="nature.jpg" alt="Nature" class="responsive">
2단계) CSS 추가
이미지가 응답성에 따라 위아래로 모두 확대되도록 하려면 CSS width 속성을 100%로 설정하고 height를 auto로 설정한다.
.responsive { width: 100%; height: auto; }
기본 예시
예제 보기참고
W3C School - How TO - Responsive Images