최신 웹 개발 튜토리얼
 

반응 형 웹 디자인 - 이미지

❮ 이전 다음 장 ❯

폭 속성을 사용하여

경우 width 속성을 100 %로 설정되고, 이미지가 반응하고 위 아래로 확장합니다 :

예

img {
    width: 100%;
    height: auto;
}
»그것을 자신을 시도

위의 예에서, 이미지가 원래 크기보다 더 커야하기 위해 확장 될 수 있음을 주목하라. 더 나은 솔루션이 많은 경우에 사용하는 것 max-width 대신 속성.

최대 너비 속성을 사용하여

경우] max-width 특성을 100 %로 설정되고, 화상은 아래에있는 경우 확장하지만, 원래 크기보다 크게 확장하지 않을 것이다 :

예

img {
    max-width: 100%;
    height: auto;
}
»그것을 자신을 시도

예제 웹 페이지에 이미지 추가

예

img {
    width: 100%;
    height: auto;
}
»그것을 자신을 시도

배경 이미지

배경 이미지는 크기 조정 및 확장에 응답 할 수 있습니다.

여기에서 우리는 세 가지 방법을 보여줍니다 :

경우] 1. background-size 속성 "포함"으로, 배경 화상이 확장되며, 콘텐츠 영역에 맞게하려고 설정된다. 그러나, 이미지의 종횡비 (이미지의 폭과 높이 사이의 비례 관계)를 유지한다 :


여기에 CSS 코드는 다음과 같습니다

예

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}
»그것을 자신을 시도

경우] 2. background-size 속성이 "100 % 100 %"로 설정되고, 배경 이미지는 전체 컨텐츠 영역을 덮도록 신장된다 :


여기에 CSS 코드는 다음과 같습니다

예

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}
»그것을 자신을 시도

경우] 3. background-size 속성이 설정되어 "cover" , 배경 이미지는 전체 컨텐츠 영역을 커버하도록 확장된다. 된다는 점을 주목하라 "cover" 값의 비율을 유지하고, 배경 화상의 일부가 클리핑 될 수있다 :


여기에 CSS 코드는 다음과 같습니다

예

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: cover;
    border: 1px solid red;
}
»그것을 자신을 시도

다른 장치에 대한 다른 이미지

큰 이미지는 작은 장치에 큰 컴퓨터 화면에 완벽하지만 쓸모가있을 수 있습니다. 어쨌든 그것을 아래로 확장 할 수있을 때 왜 큰 이미지를로드? 부하를 감소시키기 위해, 또는 다른 이유로, 다른 기기에 다른 화상을 표시하는 미디어 쿼리를 사용할 수있다.

여기에 다른 장치에 표시됩니다 하나의 큰 이미지와 하나의 작은 이미지입니다 :

예

/* For width smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}
»그것을 자신을 시도

당신은 미디어 쿼리 사용 min-device-width 대신, min-width 대신에 브라우저 폭의 장치 폭을 확인합니다. 브라우저 창 크기를 조정할 때 그런 이미지가 변경되지 않습니다 :

예

/* For devices smaller than 400px: */
body {
    background-image: url('img_smallflower.jpg');
}

/* For devices 400px and larger: */
@media only screen and (min-device-width: 400px) {
    body {
        background-image: url('img_flowers.jpg');
    }
}
»그것을 자신을 시도

HTML5 <picture> 요소

HTML5는 도입 <picture> 하나 이상의 이미지를 정의 할 수 있습니다 요소를.

브라우저 지원

요소
<picture> 지원되지 않음 38.0 38.0 지원되지 않음 25.0

<picture> 요소는 유사한 작품 <video> 및 <audio> 요소입니다. 당신은 다른 소스를 설정하고, 환경 설정을 맞는 제 1 소스는 사용되는 하나입니다 :

예

<picture>
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>
»그것을 자신을 시도

srcset 특성이 요구되고, 화상의 소스를 정의한다.

media 속성은 선택 사항이며, 당신이 찾을 미디어 쿼리 허용 CSS의 @media 규칙을 .

당신은 또한 정의해야합니다 <img> 지원하지 않는 브라우저에 대한 요소를 <picture> 요소를.


❮ 이전 다음 장 ❯