반응 형 웹 디자인 - 사진
폭 속성을 사용
폭 특성을 100 %로 설정하면, 영상이 응답 함수의 상부 및 하부 범위에 따라 실현 될 것이다 :
위의 예에서, 이미지는 원본 이미지보다 크게 않습니다. 우리는 최대 너비가이 문제에 대한 좋은 해결책 속성 사용할 수 있습니다.
최대 너비 속성을 사용하여
최대 폭 특성을 100 %로 설정하면, 사진이 원래 크기보다 클 수 없다 것
이미지 페이지 추가
배경 이미지
배경 이미지 크기를 조정하거나 줌에 응답 할 수 있습니다.
다음은 세 가지 방법 :
백그라운드 크기 속성 "포함"으로 설정된 경우 1. 배경 화상 적응 콘텐츠 면적율 것이다. 사진은 비율이 변경되지 않은 유지 :
이것은 CSS 코드입니다 :
예
폭 : 100 %;
높이 : 400 픽셀;
배경 이미지 : 홈페이지 ( 'img_flowers.jpg ');
배경 - 반복 : 아니오 - 반복;
배경 크기 : 포함;
국경 : 1 픽셀 고체 빨간;
}
»시도
백그라운드 크기 속성 설정 "100 % 100 %"이면 2. 배경 화상의 전체 영역을 커버하도록 확장된다 :
예
이것은 CSS 코드입니다 :
폭 : 100 %;
높이 : 400 픽셀;
배경 이미지 : 홈페이지 ( 'img_flowers.jpg ');
배경 크기 : 100 % 100 % ;
국경 : 1 픽셀 고체 빨간;
}
»시도
백그라운드 크기 속성이 "표지"로 설정되어있는 경우 (3), 배경 화상을 완전히 배경되도록 배경 화상 영역을 커버하기에 충분히 크게 확장된다. 속성은 영상의 비율이 너무 배경 화상의 일부가 배경에 위치 결정 영역에 표시되지 않을 수 남아 있습니다.
이것은 CSS 코드입니다 :
예
width: 100%;
height: 400px;
background-image: url('img_flowers.jpg');
background-size: cover;
border: 1px solid red;
}
»시도
다른 장치는 다른 그림을 보여
큰 사진은 큰 화면에 표시 할 수 있지만 작은 화면에 잘 표시되지 않습니다. 는 로딩 속도에 영향을 미치는, 그래서 우리는 큰 그림에서 작은 화면을로드 할 필요가 없습니다. 그래서 우리가 다른 화상을 표시 장치에 따라, 미디어 쿼리를 사용할 수있다.
다음의 큰 그림과 작은 그림은 서로 다른 장치에 표시됩니다 :
예
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 사용자는 미디어 쿼리를 사용할 수있다. 브라우저의 크기를 다시 설정, 이미지 크기가 변경되지 않습니다.
예
몸 {
배경 이미지 : 홈페이지 ( 'img_smallflower.jpg ');
}
400 픽셀 (도 같음)보다 큰 / * 장치 : * /
@media 만 화면 (분 기기 -width : 400 픽셀) {
몸 {
배경 이미지 : 홈페이지 ( 'img_flowers.jpg ');
}
}
»시도
HTML5 <사진> 요소
HTML5의 <picture> 요소는 여러 이미지를 설정할 수 있습니다.
브라우저 지원
| 요소 | |||||
|---|---|---|---|---|---|
| <그림> | 지원하지 않습니다 | 38.0 | 38.0 | 지원하지 않습니다 | 25.0 |
<picture> 유사한 요소 <video> 및 <audio> 요소입니다. 다른 장치는 바람직한 제 사용으로 설정 자원, 자원이 될 수 있습니다 :
예
<소스 srcset = "img_smallflower.jpg"미디어 = "(최대 폭 : 400 픽셀)">
<소스 srcset = "img_flowers.jpg">
<IMG SRC = "img_flowers.jpg"고도 = "꽃">
</ 그림>
»시도
srcset 속성은 이미지 리소스의 정의해야합니다.
media 미디어 쿼리의 속성은 선택 사항입니다 규칙 @media CSS를 참조 세부 사항을.
지원하지 않는 <picture> 브라우저 요소를 사용자 정의 할 수 있습니다 <img> 대신 요소를.