반응이 빠른 웹 디자인 - 이미지

반응이 빠른 웹 디자인 - 이미지

width 속성 사용
경우 width속성을 100 %로 설정되고, 이미지가 반응하고 위 아래로 확장 할 수 :

예
img {
    width: 100%;
    height: auto;
}

위의 예에서 이미지의 크기를 원래 크기보다 크게 조정할 수 있습니다. 대부분의 경우 더 나은 해결책은 max-width대신 속성 을 사용하는 것입니다.

max-width 속성 사용
경우 max-width속성을 100 %로 설정하면 이미지는가있는 경우 축소,하지만 원래 크기보다 크게 확장하지 않습니다 :

예
img {
    max-width: 100%;
    height: auto;
}

예제 웹 페이지에 이미지 추가
예
img {
    width: 100%;
    height: auto;
}