如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示

图片显示是网页设计中的重要组成部分，而图片的大小和位置也会对页面的整体美观度产生影响。在实际的网站开发过程中，我们会遇到需要将图片放入一个容器中，并让其按比例缩放以适应容器大小的需求。

本文将详细介绍如何使用 CSS 来控制 img 标签在父元素中自适应宽度或高度，并按比例显示。

使用 max-width 和 max-height 属性

为了让图片按比例缩放以适应父元素的大小，我们可以使用 max-width 和 max-height 属性来设置图片的最大宽度和最大高度，同时保持图片的原始宽高比。这样做的好处是，无论父元素的大小如何变化，图片都会按照比例缩放。

以下是示例代码：

.container {
  width: 50%;
  height: 300px;
  overflow: hidden; /* 防止图片溢出容器 */
}

.container img {
  max-width: 100%;
  max-height: 100%;
}

上述代码中，一个名为 container 的容器被定义，并设置了宽度为 50% 和高度为 300px。接下来，我们通过 overflow 属性设置了容器的溢出属性为 hidden，以防止图片溢出容器。

在 img 标签中，我们使用了 max-width 和 max-height 属性来控制图片的最大宽度和高度，使其可以自适应容器大小。这样一来，无论父元素的大小如何变化，图片都会按照比例缩放以适应容器。

使用 object-fit 属性

除了使用 max-width 和 max-height 属性之外，我们还可以使用 object-fit 属性来让图片在容器中按比例显示。object-fit 属性可以设置图片在容器中的尺寸和位置，以便使其按比例缩放和居中显示。

以下是示例代码：

.container {
  width: 50%;
  height: 300px;
  overflow: hidden; /* 防止图片溢出容器 */
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

上述代码中，我们定义了一个名为 container 的容器，并设置了宽度为 50% 和高度为 300px。接下来，我们通过 overflow 属性设置了容器的溢出属性为 hidden，以防止图片溢出容器。

在 img 标签中，我们使用了 width 和 height 属性将图片的大小设置为与容器相同，并且使用了 object-fit 属性将图片按比例缩放并居中显示。具体来说，object-fit 属性的值为 cover，意味着图片会拉伸或缩小以填充整个容器，并保持原始比例。

总结

本文介绍了两种方法来让 img 标签在父元素中自适应宽度或高度，并按比例显示。使用 max-width 和 max-height 属性可以让图片按比例缩放以适应容器大小，而使用 object-fit 属性则可以让图片在容器中按比例缩放并居中显示。

无论是哪种方法，都需要注意的是，使用不当可能会导致图片变形或失真。因此，在实际使用过程中，我们需要根据具体情况进行调整和优化，以达到最佳显示效果。