【文件属性】：
文件名称：css_object_fit:使用 CSS 3 object-fit 属性
文件大小：8.57MB
文件格式：ZIP
更新时间：2021-06-27 07:54:50
#使用 CSS3“object-fit:cover”属性的商业案例
#优化随机图片的缩略图有关如何显示相同大小的缩略图而不会使图像失真、丢失纵横比或使随机大小图片的图片失焦的指南。
#Background：需要为会议构建登陆页面，其中演讲者的照片（缩略图）需要以特定尺寸显示 - 例如，100 像素 x 100 像素。
#Problem 声明：这些照片的大小和方向（横向、纵向和方形）是随机的，并且来自应用程序无法控制的外部来源。 因此，以下解决方案将不起作用： • 无法单*剪个人资料图片以匹配缩略图占位符 DIV • 无法根据占位符尺寸强制调整图片，因为它会扭曲纵横比 • 无法从顶部或由于大小不定而居中
#Solution：CSS3 属性“object-fit:cover”来救援。 它有助于在填充整个内容框的同时保持纵横比。 对象大小被解析为对容器/图像使用的宽度和高度的覆盖约束。