css中background-size或object-fit值contain和cover中的数学公式算法

2022年06月07日 阅读491次 分类:开发 标签:js微码

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1912.html

css背景background-size或object-fit有contain和cover两个值:

  • contain会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小;

  • contain会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小;

那么我们怎样用数学公式表达出来呢?

变量说明

r'image (图片宽高比)、r'viewport (容器宽高比) 

h'image (图片高)、w'image (图片宽)

h'viewport (容器高)、w'viewport (容器宽)

公式推导

公式情况

完整公式

公式

(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1912.html