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

编程入门行业动态更新时间:2024-10-10 17:29:39

关于不同尺寸手机网页中视屏<a href=https://www.elefans.com/category/jswz/34/1767937.html style= 封面的适配"/>

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

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

更多推荐

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

本文发布于:2024-02-07 01:44:47，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1752619.html