设计网页响应式 - 图像

Gunakan atribut width

Jika width Atribut ditetapkan kepada peratusan, dan tinggi ditetapkan kepada "auto", imej akan bergerak untuk diperbesar atau disaizikan:

实例

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

亲自试一试

Perhatikan, dalam contoh di atas, imej boleh diluaskan melebihi saiz asalnya. Dalam kebanyakan kes, penyelesaian yang lebih baik adalah untuk diganti dengan penggunaan max-width Atribut.

Gunakan atribut max-width

Jika diatur atribut max-width kepada 100%, imej akan disaizikan sepanjang keperluan, tetapi tidak akan diluaskan melebihi saiz asalnya:

实例

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

亲自试一试

Tambahkan imej ke halaman web contoh

实例

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

亲自试一试

Imej latar belakang

Imej latar belakang juga boleh bertindak balas kepada pengurangan saiz dan skala.

Ini adalah tiga cara yang kami pamerkan:

1. Jika diatur background-size Jadual keadaan ditetapkan kepada "contain", imej latar belakang akan disaizikan dan cuba untuk sepadan kawasan kandungan. Walau bagaimanapun, imej akan mempertahankan nisbah lebar dan tinggi (Hubungan antara lebar dan tinggi imej):

这是 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 引入了 <picture> 元素，该元素使您可以定义多幅图像。

浏览器支持

38.0 13 38.0 9.1 25.0

<picture> 元素的作用类似于 <video> 和 <audio> 元素。我们设置了不同的来源，而匹配优先权的第一个来源是正在使用的来源：

实例

<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 属性是可选的，它接受可在 规则 @media CSS 中找到的媒体查询。

提示：您还应该为不支持 <picture> 定义浏览器元素 <img> 元素。