background-sizecontaincover是怎么用的,大家应该都明白。但是里面也有一些有趣的数学关系。

基本概念

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

将图片放进容器

三种方法

stretch : 把图片的宽高强行设置为容器的宽高

注: h'image、w'image、r'image分别为图片改变后的高、宽、宽高比。之后文章这些名词也是这个意思,不再解释。

stretch的方式可想而知后果:

那么保持怎样的数学关系才能保证图片放进容器之后不会变形呢?

答案也是明显的:

r'image = rimage

接下来介绍的两种方法就是不会变形的,也就是说能够上面的公式对于它们来说是已知条件。

contain : 让图片适应容器,我们把它“装”进容器,同时也会留下空白。就像我们看电影时的"黑边"。

对于contain方法来说,也只有图片放进容器后的高度( h'image )是未知的,我们来算一下:

如果不知道contain为什么是这样的建议先看看background-size

cover : 也可以让图片“遮”住容器。

contain对应,cover方法要来算一下 w'image

宽高比的影响

不知道大家注意到没有,刚才我们推导contain的 h'image 和cover的 w'image 时使用的图片的宽高比总是大于容器的宽高比。

这导致了什么?导致了我们推导时使用的 条件3 是不一定正确的。 额,这么说我也有点晕,看图:

可以看到,我们只考虑了 rimage > rviewport的情况。

结论

我们考虑rimage < rviewport后加完整了,图片放进容器之后的宽、高如下:

这样我们就求到了图片在应用background-size属性之后在容器中实际的宽、高。

比例 hidden

现在讨论图片放进容器后的图片与容器的比例关系hidden,这样我们就可以以此关系让图片随着容器的变化而变化。 注意,hidden是一个小于1的比例,至于为什么要这样设定后面有解释。

contain布局为例,rimage > rviewport :

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

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

这样可以看到四种可能性,但是别忘了我们在上面可是推导过 w'image 、h'image 。

所以hidden最终的结果是:

可以看出来,hidden就只有两种结果,rimage / rviewport 或 r viewport / rimage,而且这个数是小于1的(这是上面就确定的)。

所以,hidden的计算可以简化为:

后记

你可能想,搞了半天,这到底能干吗?直接用background-size不就好了,为什么还要得到具体的宽、高,得到了伸缩比又能怎么样。 我也想了想,如果只是图片,似乎上面都是废话。但如果是DOM呢?这是不是就是一种布局方式?

我也不知道,知识有时候就是这样。当你需要用到的时候,你才觉得有用。

参考文章

原文: http://www.w3cplus.com/css3/background-size-for-contain-and-cover.html

background-size中contain和cover中的数学公式的更多相关文章

  1. 从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中

    1,实现功能:从下拉菜单拖拽一个元素 出来,插入到页面中的app 列表中 并实现app向后移动一个元素的位置: 2.实现思路: 01.遍历下拉菜单,添加拖拽方法,实现位置移动功能: 02.遍历app列 ...

  2. 【poi】用POI新建一个xlsx文件【或者说将数据存入到xlsx中】/【将数据从xlsx中获取到项目中】

    第一部分:写入xlsx中 使用POI创建一个xlsx文件: 项目结构如下: 具体使用的POI中的 XSSFWorkbook   xlsx对象 Sheet 工作簿对象 Row 行对象 Cell  单元格 ...

  3. Native Application 开发详解(直接在程序中调用 ntdll.dll 中的 Native API,有内存小、速度快、安全、API丰富等8大优点)

    文章目录:                   1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Ap ...

  4. Andriod ADT v22.6.2版本中在Mainactivity.java中使用fragment_main.xml中TextView控件对象的问题

    众所周知,我们既可以在 activity_main.xml文件中控制activity中的view,也可以使用java代码的set..()方法控制它.在学习过程中,发现在ADT新版本中,和以前版本有区别 ...

  5. Java中循环删除list中元素的方法总结

    印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后在今天使用的时候发现报错了,然后去科普了一下,发现这是一个误区.下面我们来一起看一下. Java中循环遍 ...

  6. JAVA中循环删除list中元素的方法总结【转】

    印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接跳至文末 ...

  7. Class实例在堆中还是方法区中?

    1.JVM中OOP-KLASS模型 在JVM中,使用了OOP-KLASS模型来表示java对象,即:1.jvm在加载class时,创建instanceKlass,表示其元数据,包括常量池.字段.方法等 ...

  8. JAVA中循环删除list中元素的方法总结(同上篇)

    印象中循环删除list中的元素使用for循环的方式是有问题的,但是可以使用增强的for循环,然后今天在使用时发现报错了,然后去科普了一下,再然后发现这是一个误区.下面就来讲一讲..伸手党可直接跳至文末 ...

  9. Android中如何在代码中设置View的宽和高?

    Android中如何在代码中设置View的宽和高?https://zhidao.baidu.com/question/536302117.htmlhttps://blog.csdn.net/u0141 ...

随机推荐

  1. epoll的LT和ET使用EPOLLONESHOT

    epoll有两种触发的方式即LT(水平触发)和ET(边缘触发)两种,在前者,只要存在着事件就会不断的触发,直到处理完成,而后者只触发一次相同事件或者说只在从非触发到触发两个状态转换的时候儿才触发. 这 ...

  2. Javascript中的依赖注入

    首先通过带参函数来定义一个Javascript函数,相当于C#中的一个类. var Person = function(firstname, lastname){ this.firstname = f ...

  3. TStream实现多表提交

    TStream实现多表提交 function TynFiredac.SaveDatas(const ATableName, ATableName2: string; ADeltas: TStream; ...

  4. 虚拟化(三):vsphere套件的安装注意及使用

     虚拟化(一):虚拟化及vmware产品介绍 虚拟化(二):虚拟化及vmware workstation产品使用 虚拟化(五):vsphere高可用群集与容错 vsphere套件里面基本的组件有e ...

  5. python笔记34-类里面的__str__ 和__unicode__作用

    前言 最近学django,看到不少教程里面models.py里面建表,写一个类的时候,习惯上加个__str__ ,开始不太明白,简单的实践后才知道是为了美化类实例的打印内容. python3 里面用_ ...

  6. jquery 图片文件转base64 显示

    <!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...

  7. Module ngx_http_v2_module

    官方配置说明: http://nginx.org/en/docs/http/ngx_http_v2_module.html#example ngx_http_v2_module模块指令中文说明 ngx ...

  8. 嗜血法医第一二三季/Dexter全集迅雷下载

    嗜血法医 第一.二.三季 Dexter Season 1 2 3 (2006-2007-2008) 本季看点:都市的夜里,永远藏着你无法想象的秘密.德克斯特·摩根(迈克尔·C·豪尔 Michael C ...

  9. C# WebBrowser控件使用整理

    一.简介 WebBrowser 控件为 WebBrowser ActiveX 控件提供了托管包装. 托管包装使您可以在 Windows 窗体客户端应用程序中显示网页. 使用WebBrowser 控件, ...

  10. 我讨厌Apple Safari浏览器的一些地方。不想用

    1. 书签栏 无法直接新建文件夹 2. 新建书签 无法新建文件夹 3.地址栏 不显示当前书签 是否已收藏! 4. 书签栏 移动书签,体验没有Chrome好. 5.书签栏 没有chrone的 " ...