방법 - 반응형 이미지
CSS로 반응형 이미지를 만드는 방법을 알아보세요.
반응형 이미지는 화면 크기에 맞게 자동으로 조정됩니다.
반응형 효과를 보려면 브라우저 창의 크기를 조정합니다.
반응형 이미지를 만드는 방법
1단계) HTML 추가:
예시
<img src="nature.jpg" alt="Nature" class="responsive">
2단계) CSS 추가:
응답에 따라 이미지의 크기를 늘리거나 줄이려면 CSS width
속성을 100%로 설정하고 height
auto로 설정합니다.
예시
.responsive {
width: 100%;
height: auto;
}
If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%
:
Example
.responsive {
max-width: 100%;
height: auto;
}
If you want to restrict a responsive image to a maximum size, use the max-width
property, with a
pixel value of your choice:
Example
.responsive {
width: 100%;
max-width:
400px;
height: auto;
}
Go to our CSS Images Tutorial to learn more about how to style images.
Go to our CSS RWD Tutorial to learn more about responsive web design.