How To - 반응형 이미지

w3.css

CSS를 사용하여 반응형 이미지를 만드는 방법을 알아보자.

반응형 이미지는 화면 크기에 맞게 자동으로 조정된다.

<img src="nature.jpg" alt="Nature" class="responsive">

이미지가 응답성에 따라 위아래로 모두 확대되도록 하려면 CSS width 속성을 100%로 설정하고 height를 auto로 설정한다.

.responsive {
  width: 100%;
  height: auto;
}

기본 예시

W3C School - How TO - Responsive Images

Mingg`s Diary

밍구

공부 목적 블로그