后记

乃恐怕想，搞了半天，这到底能够干呢？直接用background-size非纵吓了，为什么还要抱具体的富、高，得到了伸缩比又能够怎样。
我哉想了相思，如果只是图，似乎上面还是废话。但如若是DOM呢？这是无是就是一模一样栽布局方式？

自我耶不掌握，知识有时候就算是这么。当你需要以的时候，你才当可行。

background-size的contain和cover是怎用的，大家应该都理解。但是里面为生一对妙趣横生之数学关系。

比例 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的计好简化为:

看原文 »

基本概念

面就是咱对于 r_image (图片宽高比)、r_viewport
(容器宽高比) 的定义。

丰厚高比的熏陶

勿晓大家瞩目到没，刚才咱们推导contain的 h’_image
和cover的 w’_image
时使用的图的丰足高比总是凌驾容器的丰饶高比。

随即致使了啊？导致了咱们推导时采用的 条件3 是不必然不利的。
额，这么说自己耶发出接触晕，看图：

可看看，我们唯有考虑了 r_image >
r_viewport的情况。

有关作者：risker

2014年大学毕业，现在于京某部互联网商家从事前端开发的干活，近一半年着重做运动web开发。微博粉丝太少，求粉。

个人主页 ·
我的篇章 ·
7 ·
  

将图纸放上容器

CSS Contain 和 Cover 的数学公式

2015/11/01 · CSS ·
Contain,
Cover

正文作者： 伯乐在线 –
risker
。未经作者许可，禁止转载！
接加入伯乐在线 专辑作者。

background-size的 contain和
cover大凡怎么用的，大家该还亮。但是中也发一些幽默之数学关系。

参照文章

CSS – Contain &
Cover

我的博客，欢迎订阅

微博粉丝无比少，求粉

1 赞 收藏
评论

结论

俺们考虑r_image <
r_viewport继加一体化了，图片放上容器事后的方便、高如下：

这么咱们便伸手到了图在行使background-size性之后于容器被实际上的富裕、高。

其三种植办法

• stretch : 把图片的富贵高强行设置也容器的宽高

注:
h’_image、w’_image、r’_image分级吗图转后的高、宽、宽高比。之后文章这些名词也是以此意思，不再说。

stretch的计可想而知后果:

那么保持怎样的数学关系才会管图片放上容器事后不见面变形也？
答案为是明摆着的:

r’_image = r_image

连接下去介绍的少栽办法就是勿见面变形的，也就是说能够上面的公式对于她来说是一度了解条件。

• contain :
  让图片适应容器，我们把它“装”进容器，同时也会留给空白。就像咱看录像时之”黑边”。

对于contain计吧，也只有图片放上容器后底莫大( h’_image
)是不解的，我们来算一下：

而无明了contain为什么是这般的提议优先看background-size

• cover : 也得以为图片“遮”住容器。

和contain对应，cover道而来算一下 w’_image