CSS保持图片比例

在网站开发中，图片是必不可少的元素之一，但是有时候我们希望在处理图片时能够保持其原始比例，使其在不同的设备上以一种协调的方式显示。下面介绍几种实现保持图片比例的CSS方法。

方法一：使用max-width和max-height

这种方法使用max-width和max-height属性限制图片的最大宽度和最大高度，并设置图片的宽度和高度为100%。这样即使图片的实际大小超过了max-width和max-height设定的值，图片也不会被拉伸变形。

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

方法二：使用padding

可以将图片放到一个容器中，然后设置容器的padding属性，使其比例与图片相同。这种方法适用于需要在图片周围添加边框或其他样式的情况。

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

方法三：使用object-fit属性

object-fit属性可以控制图片的大小和位置，以使其适合其容器。可以将其设置为contain或cover，以保持图片比例并填充容器。

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

以上是几种常见的保持图片比例的CSS方法，根据不同的使用场景选择合适的方法可以使图片更加美观和协调。