使用 CSS 调整图像大小

在网页设计中，调整图像大小是非常常见的操作。在 CSS 中，有几种方法可以用来调整图像的大小和比例，这让我们模块化和控制我们的网页设计变得更加灵活和易于管理。

使用 width 和 height 属性

一种最常见的调整图像大小的方法是使用 width 和 height 属性。 这种方式可以直接在 HTML 中使用 img 标签的 width 和 height 属性来设置图像的宽度和高度。

<!-- 设置固定的宽度和高度 -->
<img src="example.png" alt="example image" width="200" height="200">

<!-- 只设置宽度，高度按比例自动调整 -->
<img src="example.png" alt="example image" width="200">

<!-- 只设置高度，宽度按比例自动调整 -->
<img src="example.png" alt="example image" height="200">

但是，如果我们只是设置 width 或 height 中的一个属性，另一个属性会根据图像的原始宽高比自动缩放。

使用 max-width 和 max-height 属性

另一种调整图像大小的方法是使用 max-width 和 max-height 属性。 这种方式可以在 CSS 中灵活地设定最大宽度和最大高度，让图像在宽度和高度之间自由缩放，保持比例不变。

/* 设置最大宽度为 100% ，高度最大为 300 像素 */
img {
  max-width: 100%;
  max-height: 300px;
}

使用 object-fit 属性

如果我们的规定图像的大小和比例不同于原始图像，则可以使用 object-fit 属性。 这种方式可以通过更改图像在其容器中的定位和缩放方式来调整图像的大小和比例。

/* 图像按照其尺寸自动缩放；容器溢出的部分会被裁剪掉 */
img.contain {
  object-fit: contain;
}

/* 图像和容器的比例相同，并且会缩放并始终填满整个容器 */
img.cover {
  object-fit: cover;
}

/* 图像被拉伸或压缩以填充整个容器 */
img.fill {
  object-fit: fill;
}

/* 默认情况下图像以其原始尺寸居中放在容器中 */
img.none {
  object-fit: none;
}

这些方法可以在设计网页时让图像处理变得更加灵活和易于管理。 根据需要，混合使用这些属性可以取得更好的效果。

Markdown 代码片段：

## 使用 width 和 height 属性

一种最常见的调整图像大小的方法是使用 `width` 和 `height` 属性。 这种方式可以直接在 HTML 中使用 `img` 标签的 `width` 和 `height` 属性来设置图像的宽度和高度。

```html
<!-- 设置固定的宽度和高度 -->
<img src="example.png" alt="example image" width="200" height="200">

<!-- 只设置宽度，高度按比例自动调整 -->
<img src="example.png" alt="example image" width="200">

<!-- 只设置高度，宽度按比例自动调整 -->
<img src="example.png" alt="example image" height="200">

使用 max-width 和 max-height 属性

另一种调整图像大小的方法是使用 max-width 和 max-height 属性。 这种方式可以在 CSS 中灵活地设定最大宽度和最大高度，让图像在宽度和高度之间自由缩放，保持比例不变。

/* 设置最大宽度为 100% ，高度最大为 300 像素 */
img {
  max-width: 100%;
  max-height: 300px;
}

使用 object-fit 属性

如果我们的规定图像的大小和比例不同于原始图像，则可以使用 object-fit 属性。 这种方式可以通过更改图像在其容器中的定位和缩放方式来调整图像的大小和比例。

/* 图像按照其尺寸自动缩放；容器溢出的部分会被裁剪掉 */
img.contain {
  object-fit: contain;
}

/* 图像和容器的比例相同，并且会缩放并始终填满整个容器 */
img.cover {
  object-fit: cover;
}

/* 图像被拉伸或压缩以填充整个容器 */
img.fill {
  object-fit: fill;
}

/* 默认情况下图像以其原始尺寸居中放在容器中 */
img.none {
  object-fit: none;
}

这些方法可以在设计网页时让图像处理变得更加灵活和易于管理。 根据需要，混合使用这些属性可以取得更好的效果。