img和background

361 阅读1分钟

前言

相信很多的前端开发者,在写列表图片的时候,比如这种:

都是用background去写的,因为可以用background-size,position等属性来使大小不等的图片有一个好的展示比例。 那么您知道,img也是可以这样设置的吗?4/4全国哀悼日图片全部灰色又是怎么实现的呢?下面我来介绍下哈

用来设置img图片的位置和如何适应有宽高图片的尺寸

object-fit: cover;
object-position: center center;

参考文档

object-fit MDN
object-position MDN
img MDN
background MDN