响应式图像对于 Web 开发非常重要，因为它们可确保根据设备尺寸和分辨率调整图像的大小。响应式图像提高了页面加载速度，并减少了加载时间。

当图像上传到网站时，它有其默认的宽度和高度；但这些尺寸可以使用 CSS 进行更改。为了使图像具有响应性和流畅性，您需要为其 width 属性提供一个新值，图像的高度会自动调整到该值。

为了获得更好的适应性，您应该始终使用相对单位用于宽度属性（例如百分比），而不是绝对值（例如像素）。绝对值限制图像的响应能力。

CSS RWD 图像 - width属性

要使图像具有响应能力且流畅，width 属性设置为百分比值，height 属性设置为 auto。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   img {
      width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the image will resize.</p>
   <img src="/css/images/pink-flower.jpg">
</body>
</html>

CSS RWD 图像 - max-width 属性

为了使图像具有响应性和流畅性，max-width 将图像的属性设置为 100%，这将使图像缩小到设置的范围，但永远不会放大到超过其原始大小。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   img {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <p>Resize the browser window to see how the size of the image changes.</p>
   <img src="/css/images/pink-flower.jpg">
</body>
</html>

CSS RWD 图像 在网格内

以下示例演示了在网格列内使用响应式图像。根据图像的最大宽度值，图像会根据屏幕尺寸缩小。

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }

   .title {
      border: 2px solid black;
      padding: 10px;
      background-color: blanchedalmond;
   }

   .grid-one {
      width: 60%;
      float: left;
      padding: 10px;
      border: 2px solid black;
      background-color: darkseagreen;
   }

   .grid-two {
      width: 40%;
      float: left;
      padding: 15px;
      border: 2px solid black;
      background-color: lightgreen;
   }

   ul {
      list-style-type: none;
   }

   li {
      background-color: aqua;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
   }

   img {
      max-width: 100%;
      height: auto;
   }
</style>
</head>
<body>
   <div class="title">
   <h1>Responsive Web Design</h1>
   </div>

   <div class="grid-two">
   <ul>
      <li>Viewport</li>
      <li>Grid view</li>
      <li>Media queries</li>
      <li>Images</li>
      <li>Videos</li>
      <li>Frameworks</li>
   </ul>
   </div>

   <div class="grid-one">
   <h1>Responsive Images</h1>
   <p>Responsive images are important for the web development, as they ensure that the images are appropriately sized based on the device size and resolution. The responsive images improve the page loading speed and also reduce the time to load it.</p>
   <img src="/css/images/scenery2.jpg">
   <p>Resize the browser window to see how the content gets responsive to the resizing.</p>
   </div>
</body>
</html>

CSS RWD 图像 - 使用背景图像

背景图像也可以是根据属性 background-size: contains 调整大小或缩放。此属性将缩放图像，并尝试适应内容区域。图像的宽高比将保持不变。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      width: 100%;
      height: 400px;
      background-image: url(/css/images/pink-flower.jpg);
      background-repeat: no-repeat;
      background-size: contain;
      border: 5px solid black;
      background-color: antiquewhite;
   }
</style>
</head>
<body>
   <h1>Responsive Web Design - Images</h1>
   <div></div>
</body>
</html>

背景图像也可以根据属性 background-size:cover;。此属性将缩放图像，使其覆盖整个内容区域。图像的宽高比将保持不变，但背景图像的某些部分可能会被剪裁。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      width: 100%;
      height: 80%;
      background-image: url(/css/images/pink-flower.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      border: 5px solid red;
      background-color: antiquewhite;
   }
</style>
</head>
<body>
   <h1>Responsive Web Design - Images</h1>
   <div></div>
</body>
</html>

背景图像也可以根据属性background-size:100% 100%。该值将使图像被拉伸以覆盖整个内容区域。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      width: 100%;
      height: 80%;
      background-image: url(/css/images/pink-flower.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: 5px solid red;
      background-color: antiquewhite;
   }
</style>
</head>
<body>
   <h1>Responsive Web Design - Images</h1>
   <div></div>
</body>
</html>

CSS RWD 图像 - 使用媒体查询

当您需要在不同的设备上以不同尺寸显示图像时设备，您需要使用媒体查询。下面的示例显示了一种屏幕宽度为 50% 的图像，但为了使其在移动设备上为全尺寸，将使用媒体查询。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   /* 对于宽度小于400px: */
   body {
      background-repeat: no-repeat;
      background-image: url(/css/images/orange-flower.jpg); 
   }

   /* 宽度为400px以上: */
   @media only screen and (min-width: 700px) {
      body { 
         background-image: url(/css/images/pink-flower.jpg); 
         background-size: cover;
      }
   }
</style>
</head>
<body>
   <p style="margin-top:360px;color:white;">Resize the browser width and the background image will change at 400px.</p>
</body>
</html>