菜单

CSS Contain 和 Cover 的数学公式

2018年11月17日 - CSS/CSS3

后记

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

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

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

比例 hidden

现今议论图片放上容器后底图片及容器的百分比关系hidden,这样我们即便可以因这提到为图片就容器的转移而变化。
注意,hidden大凡一个低于1底百分比,至于缘何而这样设定后面来说明。

contain布局也条例,rimage > rviewport :

图片 1

而以cover布局也例,rimage > rviewport :

图片 2

因为此类推,得到所有情况的 hidden

图片 3

这般可视四种植可能,但是别忘了我们在面可是推导过
w’image 、h’image

所以hidden说到底的结果是:

图片 4

可以看下,hidden虽惟有区区种植结果,rimage /
rviewport
r viewport /
rimage
,而且以此数是自愧不如1底(这是方就是规定的)。

所以,hidden的计好简化为:

图片 5

看原文 »

基本概念

图片 6

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

丰厚高比的熏陶

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

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

图片 7

可看看,我们唯有考虑了 rimage >
rviewport的情况。

有关作者:risker

图片 8

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

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

图片 9

将图纸放上容器

CSS Contain 和 Cover 的数学公式

2015/11/01 · CSS ·
Contain,
Cover

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

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

参照文章

CSS – Contain &
Cover

我的博客,欢迎订阅

微博粉丝无比少,求粉

1 赞 收藏
评论

结论

俺们考虑rimage <
rviewport继加一体化了,图片放上容器事后的方便、高如下:

图片 10

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

其三种植办法

图片 11

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

stretch的计可想而知后果:

图片 12

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

r’image = rimage

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

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

图片 13

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

contain对应,cover道而来算一下 w’image

图片 14

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图