Css 简明教程

CSS RWD Images

对于 web 开发而言，自适应图像非常重要，因为它们确保图像基于设备大小和分辨率适当调整大小。自适应图像可以提高页面加载速度，并减少加载时间。

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

为了获得更好的适应性，你应始终为 width 属性使用相对单位，例如百分比，而不是绝对值，例如像素。绝对值限制图像的响应性。

CSS RWD Images - width Property

为了使图像具有响应性和流动性，图像的 * width* 属性设置为 percentage 值，并设置 * 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="images/pink-flower.jpg">
</body>
</html>

CSS RWD Images - max-width Property

为了使图像具有响应性和流动性，图像的 * 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="images/pink-flower.jpg">
</body>
</html>

CSS RWD Images - Within a grid

以下示例演示了网格列中自适应图像的使用。基于图像的 max-width 值，图像将根据屏幕大小缩小。

<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="images/scenery2.jpg">
   <p>Resize the browser window to see how the content gets responsive to the resizing.</p>
   </div>
</body>
</html>

CSS RWD Images - Using Background Images

背景图像也可以基于 * background-size: contain* 属性调整大小或缩小。此属性将缩放图像，并尝试适应内容区域。会保持图像的纵横比。

<html>
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   div {
      width: 100%;
      height: 400px;
      background-image: url(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(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(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 Images - Using Media Query

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

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

   /* For width 400px and larger: */
   @media only screen and (min-width: 700px) {
      body {
         background-image: url(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>