CSS Contain&Cover的数学公式
background-size 的 contain 和 cover 是怎么用的，大家应该都明白。但是里面也有一些有趣的数学关系。
基本概念
上面就是我们对于 r image (图片宽高比)、r viewport (容器宽高比) 的定义。
将图片放进容器
###三种方法
-
stretch: 把图片的宽高强行设置为容器的宽高
注: h' image 、w' image 、r' image 分别为图片改变后的高、宽、宽高比。之后文章这些名词也是这个意思，不再解释。
stretch的方式可想而知后果:
那么保持怎样的数学关系才能保证图片放进容器之后不会变形呢？
答案也是明显的:
r' image = r image
接下来介绍的两种方法就是不会变形的，也就是说能够上面的公式对于它们来说是已知条件。
-
contain: 让图片适应容器，我们把它“装”进容器，同时也会留下空白。就像我们看电影时的"黑边"。
对于
contain方法来说，也只有图片放进容器后的高度( h' image )是未知的，我们来算一下：
如果不知道contain为什么是这样的建议先看看
background-size -
cover: 也可以让图片“遮”住容器。
和
contain对应，cover方法要来算一下 w' image
宽高比的影响
不知道大家注意到没有，刚才我们推导 contain 的 h' image 和 cover 的 w' image 时使用的图片的宽高比总是大于容器的宽高比。
这导致了什么？导致了我们推导时使用的 条件3 是不一定正确的。
额，这么说我也有点晕，看图：
可以看到，我们只考虑了 r image > r viewport 的情况。
结论
我们考虑r image < r viewport 后加完整了，图片放进容器之后的宽、高如下：
这样我们就求到了图片在应用 background-size 属性之后在容器中实际的宽、高。
比例 hidden
现在讨论图片放进容器后的图片与容器的比例关系 hidden ，这样我们就可以以此关系让图片随着容器的变化而变化。
注意， hidden 是一个小于1的比例，至于为什么要这样设定后面有解释。
以 contain 布局为例，r image > r viewport :
而以 cover 布局为例，r image > r viewport :
以此类推，得到所有情况的 hidden
这样可以看到四种可能性，但是别忘了我们在上面可是推导过 w' image 、h' image 。
所以 hidden 最终的结果是：
可以看出来， hidden 就只有两种结果， r image / r viewport 或 r viewport / r image ，而且这个数是小于1的(这是上面就确定的)。
所以， hidden 的计算可以简化为:
后记
你可能想，搞了半天，这到底能干吗？直接用 background-size 不就好了，为什么还要得到具体的宽、高，得到了伸缩比又能怎么样。
我也想了想，如果只是图片，似乎上面都是废话。但如果是DOM呢？这是不是就是一种布局方式？
我也不知道，知识有时候就是这样。当你需要用到的时候，你才觉得有用。
参考文章
CSS – Contain & Cover
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
