如何在css中设置图像大小而不改变纵横比

在css中设置图像大小是常见的需求，但如果同时要保持图像的纵横比，该怎么做呢？以下是三种方法：

1. 使用 max-width 和 max-height

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

将图像的最大宽度和最大高度都设置为100%，当图像的实际大小超过容器的大小时，图像会缩小，但仍然保持它的纵横比。

2. 使用 width 和 height

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

将图像的宽度和高度都设置为auto，容器中的图像将自动缩小到适合容器的大小。通过将最大宽度和最大高度设置为100%，也可以确保图像不会超出容器的大小。

3. 使用 object-fit 属性

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

object-fit属性指定如何调整图像大小以适应容器。将其设置为contain，使图像完全符合容器。这意味着图像可能无法填满容器，但它将保持其纵横比。

通过应用上述任意一种方法，都可以在css中设置图像大小而不改变纵横比。