CSS 响应式图像教程

今天的大多数网站都是响应式的。而如果你需要在这些网站上将图像居中对齐，你需要学习如何用 CSS 使图像流畅或响应。

我在几周前发布了一个视频教程，解释了如何一步一步地制作一个响应式网站。在视频中，我们做了一张响应式图片。但在这篇文章中，我想更详细地介绍一下如何使图像具有响应性。

你还将了解到一些在你试图使图像响应时可能出现的常见问题——我将尝试解释如何解决这些问题。

如何用 CSS 使图像具有响应性

让图像变得流畅，或者说具有响应性，实际上是非常简单的。当你上传一张图片到你的网站时，它有一个默认的宽度和高度，你可以用 CSS 来改变它们。

要使图像具有响应性，你需要为其 width 属性赋予一个新值。然后图像的高度会自动调整。

要知道的重要一点是，对于 width 属性，你应该始终使用相对单位，例如百分比，而不是绝对单位，例如像素。

img {
  width: 500px;
}

例如，如果你定义了 500px 的固定宽度，你的图片就不会有响应性——因为这个单位是绝对的。

img {
  width: 50%;
}

这就是为什么你应该指定一个相对单位，比如 50%。这种方法将使你的图像流畅，并且无论屏幕尺寸如何，它们都可以自行调整大小。

我被问得最多的问题之一是是否应该使用媒体查询。

媒体查询是 CSS 的另一个重要功能，有助于使网站具有响应性。我不会在这里详细介绍，但是你可以稍后阅读我的另一篇文章以了解如何更详细地使用媒体查询。

这个问题的答案是：“视情况而定”。如果你希望你的图像在一台设备和另一台设备之间具有不同的尺寸，那么你将需要使用媒体查询。否则，你不需要使用。

现在对于此示例，你的图像对于任何类型的屏幕都有 50% 的宽度。但是当你想让它全尺寸用于移动设备时，你需要从媒体查询中获得帮助：

@media only screen and (max-width: 480px) {
  img {
    width: 100%;
  }
}

所以根据媒体查询规则，任何小于 480px 的设备都会占据屏幕宽度的全尺寸。

你还可以在下面观看此帖子的视频版本：

开发人员制作响应式图像的另一种方法是 max-width 属性。但是，这并不总是最好的方法，因为它可能不适用于每种屏幕尺寸或设备。

在我们继续举例之前，首先要了解的是 max-width 属性的作用。

max-width 属性设置元素的最大宽度，它不允许该元素的宽度大于其 max-width 值（但可以更小）。

例如，如果图像的默认宽度为 500px，而你的屏幕尺寸只有 360px，那么你将无法看到完整的图像，因为没有足够的空间：

img {
  max-width: 100%;
  width: 500px;  // assume this is the default size
}

你可以为图像定义一个 max-width 属性并将其设置为 100%，这会将 500px 的图像缩小到 360px 的空间。因此，你将能够在较小尺寸的屏幕上看到完整的图像。

好消息是，由于你使用的是相对单位，因此图像在任何小于 500 像素的设备中都是流畅的。

不幸的是，屏幕尺寸会稍微大于 500 像素，但图像不会，因为它的默认宽度为 500 像素。这种方法会破坏图像的响应能力。

要解决此问题，你需要再次使用 width 属性，这使得 max-width 属性派不上用场。

你可能遇到的另一个常见问题与 height 属性有关。通常，图像的高度会自动调整大小，因此你无需为图像设置 height 属性（因为它会破坏图像）。

但在某些情况下，你可能必须使用必须具有固定高度的图像。因此，当你为图像分配固定高度时，它仍然会响应，但看起来不太好。

img {
  width: 100%;
  height: 300px;
}

幸运的是，CSS 提供了另一个属性来解决这个问题……

为了更好地控制你的图像，CSS 提供了另一个名为 object-fit 的属性。让我们使用 object-fit 属性并设置一个值，这将使你的图像看起来更好：

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: bottom;
}

如果需要，你还可以使用 object-position 属性（除了 object-fit）来关注图像的特定部分。许多人不知道 object-fit 属性，但它可以帮助解决这些问题。

我希望这篇文章可以帮助你理解和解决响应式图像的问题。如果你想了解有关 Web 开发的更多信息，请随时查看我的 YouTube 频道。

感谢你阅读本文！