css将图片等比缩放的方法

1. 使用百分比

在CSS中，可以使用百分比来控制元素的尺寸。可以通过设置元素的宽度为百分比来实现图片等比缩放。例如：

.img {
  width: 50%;
  height: auto;
}

上述代码会将图片的宽度设置为其容器宽度的50%，高度自动调整为保持宽高比。

2. 使用 max-width 和 max-height

另一种方法是使用 max-width 和 max-height 属性。这种方法可以确保图片不会超出指定的尺寸，并且也可以实现图片等比缩放。例如：

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

上述代码会将图片的最大宽度和最大高度都设置为其容器的宽度和高度。

3. 使用 object-fit

CSS3新增了一个 object-fit 属性，它可以控制图片在容器中的显示方式，包括填充整个容器、保持原始比例等等。这种方法的兼容性不太好，需要考虑使用的场景。例如：

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

上述代码会让图片等比缩放，并将其放置在容器中，保证容器能完全显示图片，但在图片较小时，图片可能会有留白。

4. 使用 background-size

如果图片是背景图片，可以使用 background-size 属性来实现等比缩放。例如：

.div {
  width: 300px;
  height: 200px;
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

上述代码将图片设置为容器的背景，通过设置 background-size 为 cover 来实现图片等比缩放，并将其放置在容器中心。