수

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

· 2017-10-17 (화) 23:38:04 · 2642

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

 


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;
}

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 17-11-25 조회 2,861
기타 17-11-24 조회 2,683
기타 17-11-24 조회 2,389
기타 17-11-24 조회 1,926
CSS 17-11-24 조회 3,151
기타 17-11-21 조회 2,323
기타 17-11-21 조회 2,730
기타 17-11-21 조회 2,546
기타 17-11-10 조회 2,120
기타 17-11-10 조회 1,883
기타 17-11-10 조회 1,840
CSS 17-11-08 조회 2,115
CSS 17-11-08 조회 2,082
CSS 17-11-08 조회 2,363
기타 17-10-24 조회 2,196
기타 17-10-24 조회 2,307
기타 17-10-24 조회 2,591
기타 17-10-20 조회 2,614
기타
[기타]
17-10-20 조회 2,113
기타
[기타]
17-10-20 조회 2,310
CSS 17-10-19 조회 3,248
CSS 17-10-17 조회 3,773
CSS 17-10-17 조회 2,643
CSS 17-10-17 조회 3,136
HTML 17-10-17 조회 3,678
웹접근성 17-10-17 조회 2,876
CSS 17-10-12 조회 3,114
CSS 17-10-12 조회 4,240
CSS 17-10-12 조회 3,005
반응형 17-10-11 조회 2,933