수

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

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

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

 


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,720
HTML 17-10-07 조회 3,522
HTML 17-10-06 조회 3,377
CSS 17-09-29 조회 2,308
CSS 17-09-29 조회 2,675
CSS 17-09-29 조회 2,531
CSS 17-09-26 조회 4,067
CSS 17-09-26 조회 2,731
CSS 17-09-26 조회 1,940
CSS 17-09-22 조회 2,250
CSS 17-09-22 조회 2,414
CSS 17-09-22 조회 2,379
HTML 17-09-22 조회 4,792
CSS 17-09-21 조회 1,931
CSS 17-09-21 조회 2,059
CSS 17-09-21 조회 1,924
CSS 17-09-19 조회 1,955
CSS 17-09-19 조회 1,638
CSS 17-09-19 조회 1,496
CSS 17-09-18 조회 2,588
CSS 17-09-18 조회 2,385
CSS 17-09-18 조회 2,371
CSS 17-09-14 조회 2,417
CSS 17-09-14 조회 2,094
CSS 17-09-14 조회 2,146
CSS 17-09-11 조회 2,480
CSS 17-09-11 조회 2,325
CSS 17-09-11 조회 2,131
CSS 17-09-10 조회 1,996