上一节:
下一节:

  CSS RWD图像

  • CSS响应式设计图像使用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”，则背景图像将缩放，并尝试适合内容区域。但是，图像将保持其纵横比（图像的宽度和高度之间的比例关系）：

    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％”，则背景图像将拉伸以覆盖整个内容区域：

    div {
  width: 100%;
  height: 400px;
  background-image: url('img_flowers.jpg');
  background-size: 100% 100%;
  border: 1px solid red;
}
    尝试一下

    3.如果background-size属性设置为“cover”，则背景图像将缩放以覆盖整个内容区域。请注意，“cover”值保持纵横比，并且背景图像的某些部分可能会被剪裁：

    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>元素的工作方式与<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属性是可选的，并接受您在CSS @media规则中找到的媒体查询 。您还应该使用<img>为不支持<picture>元素的浏览器定义元素。

上一节:
下一节: