关于不同尺寸手机网页中视屏封面的适配

在视频网页中，有时候我们需要为视频添加封面，在这个过程中，不同的手机适配不同大小的封面。如果使用图片会造成图片拉伸问题导致图片严重变形。因此使用背景图片作为封面并设置三个属性
background-position: center;
background-size: cover;
background-repeat: no-repeat;
让封面居中且覆盖全部背景框，不重复，不显示被遮挡的部分，在这个过程中前端会自动调整封面大小进行适配。