css伪元素——content设置图片时无法设置大小的解决 （background-size， background）

伪元素的content支持直接设置图片，但此时伪元素的width和height无法控制图片大小。

.item::before {
  content: url(~assets/img.png);
  display: block;
  display:block;
  width: 14px;
  height: 14px;
  object-fit: fill;
}

虽然设置了object-fit: fill 让图片“填充”整个容器。但也不能设置图片尺寸。

解决方法： 在伪元素的background中设置图片，设置background-size:cover来控制图片大小

.item::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background:url('img.png')
  background-size:cover;
}

background-size: length|percentage|cover|contain;

值	描述
length	设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为 auto(自动)
percentage	将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)"
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。