CSS基础教程：图片（二）

hudson 译原文

图像适应

object-fit 属性指定如果图像的宽高比不被保持应该如何调整图像大小。此属性将图像调整为适合其容器。

此属性可以具有以下值：

contain：保持宽高比。内容按比例缩放以适应容器的尺寸，而不裁剪。
cover：为了保持宽高比，可能裁剪内容。内容按比例缩放以填充容器的尺寸。
fill：拉伸内容以适应容器的尺寸，不考虑宽高比。
none：以原始大小显示内容，不进行缩放或裁剪。
scale-down：显示内容，就像未指定 none 或contain 一样。当内容小于容器的尺寸时，它将按比例缩小。如果内容较大，则会像 contain 一样。

以下是示例：

<html>
<head>
<style>
   img {
      border: 2px solid black; margin-bottom: 5px; height: 200px; width: 200px;
   }
</style>
</head>
<body>
   <h2>图像对象适应</h2>
   <div>
      <h3>fill</h3>
      <img style="object-fit: fill;" src="images/white-flower.jpg" alt="object-fit: fill">
   </div>
   <div>
      <h3>cover</h3>
      <img style="object-fit: cover;" src="images/white-flower.jpg" alt="object-fit: cover">
   </div>
   <div>
      <h3>contain</h3>
      <img style="object-fit: contain;" src="images/white-flower.jpg" alt="object-fit: contain">
   </div>
   <div>
      <h3>none</h3>
      <img style="object-fit: none;" src="images/white-flower.jpg" alt="object-fit: none">
   </div>
   <div>
      <h3>scale-down</h3>
      <img style="object-fit: scale-down;" src="images/white-flower.jpg" alt="object-fit: scale-down">
   </div>
</body>
</html>

图像位置

object-position 属性用于定位替换元素（如图像）在其容器中的位置。

object-position 属性可以具有以下值：

<position>：从 top、bottom、left、right、center 这些值中定义元素的二维位置。
<length-percentage>：任何长度或百分比值。例如：50px、30%。
initial：设置为初始值。
inherit：从其父元素继承。

以下是示例：

<html>
<head>
<style>
   article {
      margin: 0.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
      gap: 0.5rem;
   }
   .img-container {
      width: 20ch;
      border: 1ch solid #71a589;
      background: orange;
   }
   img {
      width: 100%;
      display: block;
      object-fit: none;
   }
   .image-1 {
      object-position: 50% 50%;
   }
   .image-2 {
      object-position: left bottom;
   }
   .image-3 {
      object-position: 20% 80%;
   }
   .image-4 {
      object-position: 40px 60px;
   }
   .image-5 {
      object-position: right 75%;
   }
   .image-6 {
      object-position: 10px center;
   }
</style>
</head>
<body>
   <h2>图像对象位置</h2>
   <article>
      <div class="container">
         <h3>1. 默认值</h3>
         <div class="img-container">
            <img class="image-1" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>2. object-position: left bottom;</h3>
         <div class="img-container">
            <img class="image-2" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>3. object-position: 20% 80%;</h3>
         <div class="img-container">
            <img class="image-3" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>4. object-position: 40px 60px;</h3>
         <div class="img-container">
            <img class="image-4" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>5. object-position: right 75%;</h3>
         <div class="img-container">
            <img class="image-5" src="images/scenery2.jpg" />
         </div>
      </div>
      <div class="container">
         <h3>6. object-position: 10px center;</h3>
         <div class="img-container">
            <img class="image-6" src="images/scenery2.jpg" />
         </div>
      </div>
   </article>
</body>
</html>

图像作为背景

CSS 允许将图像设置为另一个元素的背景。可用于此目的的属性是 background-image。

background-image 属性将一个或多个图像设置为背景。

它可以具有以下值：

none: 指定不设置图像作为背景。
<image>: 要设置为背景的图像的 URL。

注意：可以将多个图像作为背景。只需用逗号分隔图像即可。

以下是一个示例：

<html>
<head>
<style>
   body {
      background-color: beige;
      background-image: url(images/logo.png);
   }
</style>
</head>
<body>
</body>
</html>