如何让图片像背景一样显示呢?

这里需要用到object-fit属性

MDN地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-fit的取值:

fill(不保持纵横比缩放图片,使图片完全适应)
contain(保持纵横比缩放图片,使图片的长边能完全显示出来)
cover(保持纵横比缩放图片,只保证图片的短边能完全显示出来)
none(保持图片宽高不变)
scale-down(当图片实际宽高小于所设置的图片宽高时,显示效果与none一致;否则,显示效果与contain一致)

 

注意:img图片需要设置宽高,因为上述属性都是和设置的宽高比较菜生效的,一般设置宽高为100%即可。

注意兼容性,一些低版本浏览器不支持

相关文章:

  • 2022-12-23
  • 2021-09-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-30
  • 2021-12-21
  • 2021-05-31
  • 2022-02-07
猜你喜欢
  • 2021-04-19
  • 2021-07-22
  • 2022-12-23
相关资源
相似解决方案