使用CSS进行图片自适应的两个方法

1.background

我们把图片作为背景，然后用background-size属性进行调节

.img-container{
            width:688px;
            height:304px;
            background: black url(./test.png) no-repeat center center;
            background-size: contain;
        }

2.object-fit 属性

设置好图片的宽高，然后设置object-fit属性为contain就是常见的图片自适应效果。

    img {
      width: 400px;
      height: 400px;
      object-fit: contain;
    }

object-fit: fill|contain|cover|scale-down|none|initial|inherit;