어떻게 만드는가: 반응형 이미지
CSS로 반응형 이미지를 사용하는 방법을 배웁니다。
반응형 이미지는 자동으로 화면 크기에 맞게 조정됩니다。
브라우저 창 크기를 조정하여 반응형 효과를 확인하세요：
반응형 이미지를 어떻게 만드는가
第一步 - HTML 추가:
<img src="nature.jpg" alt="Nature" class="responsive">
第二步 - CSS 추가:
반응형 이미지가 확대와 축소가 가능하도록 하려면 CSS의 width 속성을 설정합니다 100%，height 설정值为 auto:
예제
.responsive {
width: 100%;
height: auto;
}
이미지가 필요할 때 축소되지만 원래 크기를 초과하지 않도록 하려면 사용하세요 max-width: 100%:
예제
.responsive {
max-width: 100%;
height: auto;
}
반응형 이미지를 최대 크기로 제한하려면 사용하세요 max-width 속성 및 선택한 픽셀 값:
예제
.responsive {
width: 100%;
max-width: 400px;
height: auto;
}
관련 페이지
教程：CSS 이미지
