css-width100%
css-height100%
css-expression计算
高宽auto,设置max-width,max-height
后面三种方案效果是一样的,在设计稿中,父容器高宽固定,图片展示等比例缩放占满整个容器时效果最好,设计师PM也倾向于这种铺满容器的方案,在动手之前请说服PM 铺满容器时肯定会对图片进行相应的裁剪!
object-fit cover
容器定宽高,图片高宽100% 然后设置object-fit,这个属性和background-size的裁剪方式一样,只是一个是针对背景,一个事对img videos等媒体标签https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit