반응형 웹 페이지 디자인 - 이미지

width 속성을 사용하여

다음과 같이 설정하면 width 속성을 백분율로 설정하고 높이를 "auto"로 설정하면 이미지는 확대되거나 줄어들어 줄 수 있습니다:

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

위의 예제에서는 이미지가 원래 크기를 넘어 확대될 수 있습니다. 대부분의 경우, 더 나은 해결책은 다음 속성을 사용하는 것이 좋습니다: max-width 속성.

max-width 속성을 사용하여

max-width 속성을 100%로 설정하면 이미지는 필요에 따라 줄어들지만, 원래 크기를 넘어 확대되지 않습니다:

实例

img {
  max-width: 100%;
  height: auto;
}

亲自试一试

이미지를 인스턴스 웹 페이지에 추가합니다

实例

img {
  width: 100%;
  height: auto;
}

亲自试一试

배경 이미지

배경 이미지도 크기 조정과 줄이기 비율에 응답할 수 있습니다.

이렇게 세 가지 다른 방법을 보여드립니다:

1. 다음과 같이 설정하면 background-size 속성이 "contain"로 설정되면 배경 이미지는 확대되고 내용 영역에 맞추려고 시도하지만, 이미지는 그 길이와 너비 비율을 유지합니다(이미지 너비와 높이 간의 비율 관계):

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

亲自试一试

다양한 장치에 맞는 다양한 이미지를 준비하세요

큰 이미지는 대형 컴퓨터 화면에서 완벽하게 표시되지만, 소형 장치에서는 사용할 수 없습니다. 이미지를 줄이지 않아도 되는 경우에도 큰 이미지를 로드하는 이유는 무엇인가요? 부하를 줄이거나 다른 이유로, 다른 장치에서 다른 이미지를 표시할 수 있는 미디어 쿼리를 사용할 수 있습니다.

이는 큰 이미지와 작은 이미지가 다른 장치에서 표시됩니다：

实例

/* 400 픽셀 미만의 너비에 대한 테스트: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 픽셀 또는 더 큰 너비에 대한 테스트: */
@media only screen and (min-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

미디어 쿼리를 사용하여 min-device-width 대신 min-width 장치 너비를 확인하여 브라우저 너비 대신 사용합니다. 그런 다음, 브라우저 창 크기를 조정할 때 이미지가 변경되지 않도록 합니다：

实例

/* 400 픽셀 미만의 장치에 대한 테스트: */
body {
  background-image: url('img_smallflower.jpg'); 
}
/* 400 픽셀 이상의 장치에 대한 테스트: */
@media only screen and (min-device-width: 400px) {
  body { 
    background-image: url('img_flowers.jpg'); 
  }
}

亲自试一试

HTML5 <picture> 요소를

HTML5는 요소는 여러 장의 이미지를 정의할 수 있게 해줍니다.

브라우저 지원

38.0 13 38.0 9.1 25.0

요소의 역할은 <video> 과 <audio> 요소. 다양한 출처를 설정했으며, 우선순위가 있는 첫 번째 출처는 사용 중인 출처입니다：

实例


  
  
  Flowers

亲自试一试

srcset 属性是必需的，它定义图像的来源。

media 属性是可选的，它接受可在 CSS @media 规则 中找到的媒体查询。

提示：您还应该为不支持 元素的浏览器定义 元素。