css实现等比例缩放图片

CSS实现等比例缩放图片是一种常见的UI设计技巧。它可用于创建响应式布局，提高网站性能，改进用户体验。下面介绍几种实现等比例缩放图片的CSS方法。

/*1. 按比例缩放图片*/
img {
  max-width: 100%;
  height: auto;
}

/*2. 按比例缩放图片，最大高度为200px*/
img {
  max-height: 200px;
  max-width: 100%;
  height: auto;
}

/*3. 按比例缩放背景图*/
div {
  background: url('image.jpg') center/cover no-repeat;
  /* center: 背景图水平垂直居中 */
  /* cover: 背景图等比例缩放，覆盖容器 */
  /* no-repeat: 背景图不平铺 */
}

/*4. 按比例缩放背景图，最大高度为200px*/
div {
  max-height: 200px;
  background: url('image.jpg') center/cover no-repeat;
}

/*5. 按比例缩放容器和图片*/
.container {
  position: relative;
  width: 200px;
  height: 200px;
}
img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

第一种方法是最基本的等比例缩放图片方法，通过设置max-width为100%，height为auto，让图片宽度铺满容器，高度随比例缩放，从而实现等比例缩放。

第二种方法是在第一种方法基础上添加了max-height属性，用于限制图片高度不超过200px。这种方法适用于某些场景中需要限制图片高度的情况。

第三种方法是按比例缩放背景图，background属性中使用center/cover关键字，让背景图居中并等比例缩放，从而实现等比例缩放。

第四种方法是在第三种方法基础上添加了max-height属性，用于限制背景图高度不超过200px。需要注意的是，这种方法对背景图进行了等比例缩放，但并没有对容器进行等比例缩放。

第五种方法是将图片放置于容器内，通过使用position和margin样式配合实现等比例缩放。将图片的宽高都设置为100%时会导致图片变形，所以要使用max-width和max-height属性限制图片最大宽高，同时将margin属性设置为auto，以实现水平垂直居中。