수

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

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

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

 


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에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
CSS 17-10-11 조회 2,723
CSS 17-10-11 조회 2,719
HTML 17-10-07 조회 3,521
HTML 17-10-06 조회 3,375
CSS 17-09-29 조회 2,307
CSS 17-09-29 조회 2,673
CSS 17-09-29 조회 2,531
CSS 17-09-26 조회 4,066
CSS 17-09-26 조회 2,730
CSS 17-09-26 조회 1,939
CSS 17-09-22 조회 2,248
CSS 17-09-22 조회 2,413
CSS 17-09-22 조회 2,377
HTML 17-09-22 조회 4,790
CSS 17-09-21 조회 1,930
CSS 17-09-21 조회 2,058
CSS 17-09-21 조회 1,923
CSS 17-09-19 조회 1,954
CSS 17-09-19 조회 1,637
CSS 17-09-19 조회 1,495
CSS 17-09-18 조회 2,586
CSS 17-09-18 조회 2,384
CSS 17-09-18 조회 2,370
CSS 17-09-14 조회 2,416
CSS 17-09-14 조회 2,093
CSS 17-09-14 조회 2,145
CSS 17-09-11 조회 2,478
CSS 17-09-11 조회 2,324
CSS 17-09-11 조회 2,129
CSS 17-09-10 조회 1,995