后记
乃恐怕想,搞了半天,这到底能够干呢?直接用background-size
非纵吓了,为什么还要抱具体的富、高,得到了伸缩比又能够怎样。
我哉想了相思,如果只是图,似乎上面还是废话。但如若是DOM呢?这是无是就是一模一样栽布局方式?
自我耶不掌握,知识有时候就算是这么。当你需要以的时候,你才当可行。
background-size
的contain
和cover
是怎用的,大家应该都理解。但是里面为生一对妙趣横生之数学关系。
比例 hidden
现今议论图片放上容器后底图片及容器的百分比关系hidden
,这样我们即便可以因这提到为图片就容器的转移而变化。
注意,hidden
大凡一个低于1底百分比,至于缘何而这样设定后面来说明。
以contain
布局也条例,rimage > rviewport :
而以cover
布局也例,rimage > rviewport :
因为此类推,得到所有情况的 hidden
这般可视四种植可能,但是别忘了我们在面可是推导过
w’image 、h’image 。
所以hidden
说到底的结果是:
可以看下,hidden
虽惟有区区种植结果,rimage /
rviewport 或 r viewport /
rimage,而且以此数是自愧不如1底(这是方就是规定的)。
所以,hidden
的计好简化为:
看原文 »
基本概念
面就是咱对于 rimage (图片宽高比)、rviewport
(容器宽高比) 的定义。
丰厚高比的熏陶
勿晓大家瞩目到没,刚才咱们推导contain
的 h’image
和cover
的 w’image
时使用的图的丰足高比总是凌驾容器的丰饶高比。
随即致使了啊?导致了咱们推导时采用的 条件3
是不必然不利的。
额,这么说自己耶发出接触晕,看图:
可看看,我们唯有考虑了 rimage >
rviewport的情况。
有关作者:risker
2014年大学毕业,现在于京某部互联网商家从事前端开发的干活,近一半年着重做运动web开发。微博粉丝太少,求粉。
个人主页 ·
我的篇章 ·
7 ·
将图纸放上容器
CSS Contain 和 Cover 的数学公式
2015/11/01 · CSS ·
Contain,
Cover
正文作者: 伯乐在线 –
risker
。未经作者许可,禁止转载!
接加入伯乐在线 专辑作者。
background-size
的 contain
和
cover
大凡怎么用的,大家该还亮。但是中也发一些幽默之数学关系。
参照文章
CSS – Contain &
Cover
我的博客,欢迎订阅
微博粉丝无比少,求粉
1 赞 收藏
评论
结论
俺们考虑rimage <
rviewport继加一体化了,图片放上容器事后的方便、高如下:
这么咱们便伸手到了图在行使background-size
性之后于容器被实际上的富裕、高。
其三种植办法
- stretch : 把图片的富贵高强行设置也容器的宽高
注:
h’image、w’image、r’image分级吗图转后的高、宽、宽高比。之后文章这些名词也是以此意思,不再说。
stretch
的计可想而知后果:
那么保持怎样的数学关系才会管图片放上容器事后不见面变形也?
答案为是明摆着的:
r’image = rimage
连接下去介绍的少栽办法就是勿见面变形的,也就是说能够上面的公式对于她来说是一度了解条件。
- contain :
让图片适应容器,我们把它“装”进容器,同时也会留给空白。就像咱看录像时之”黑边”。
对于contain
计吧,也只有图片放上容器后底莫大( h’image
)是不解的,我们来算一下:
而无明了contain为什么是这般的提议优先看
background-size
- cover : 也得以为图片“遮”住容器。
和contain
对应,cover
道而来算一下 w’image