background-size的cover和contain指定背景图片的自适应方式，只能对整张图片进行缩放。

cover是拉伸图片使之充满元素，元素肯定是被铺满的，但是图片有可能显示不全。

contain则是拉伸图片使图片完全显示在元素内，图片肯定能显示全，但是元素可能不会被铺满。

以上“可能”的情况，发生在元素尺寸和图片尺寸宽高比例不一致的时候。

当元素与背景图片的大小一样，或者是宽高比例一致时，contain和cover的填充效果是一样的，因为两者在拉伸后总能使图片“恰好”完全充满元素。

background-size可以取具体的值以及百分比。

CSS3 background-size:cover/contain的更多相关文章

  1. css3 & background & background-image

    css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...

  2. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  3. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  4. css之background的cover和contain的缩放背景图

    对于这两个属性,官网是这样解释的: contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小. 等比例缩放图象到垂直或者水平其中一项填满区域. cover 此时会保持图像的纵横 ...

  5. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  6. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  7. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  8. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  9. HTML 学习笔记 CSS3 (背景)

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在CSS3里面 你可以在一个标签元素里应用多个 ...

  10. CSS3入门

    CSS3 w3cschools css3  MDN英文  MDN中文 CSS3 is the latest evolution of the Cascading Style Sheets langua ...

随机推荐

  1. bootstrap弹出框

    要想使用Bootstrap Popover(弹出框)则必须引入其依赖的文件: jquery.js这个必须的(还是要写在其他js前面,bootstrap是依赖jquery的哦) bootstrap-to ...

  2. DTD

    DTD(文档类型定义)的作用是定义 XML 文档的合法构建模块. 它使用一系列的合法元素来定义文档结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 内部的 DOCTYPE 声明 ...

  3. rabbitmq-message(C#)

    1.安装Erlang Windows Binary File 2.安装rabbitmq-server(windows)rabbitmq-server-3.5.4.exe 参考:http://www.r ...

  4. url路径

      /:表示根目录(最原始开头的那个目录): ~/:表示虚拟站点根目录: ../:表示上级目录(当前目录的上一级),相当于在当前目录按了一次后退键: ../../:表示上上级目录: ./:当前目录(当 ...

  5. 关于ADB server didn't ACK * failed to start daemon *的问题

    查看5037端口被谁占用了, 开始--运行--CMD 到命令提示符,输入 netstat -aon|findstr "5037" 输入 tasklist|findstr " ...

  6. 企业架构与建模之Archimate视图和视角

    企业架构与建模之Archimate视图和视角 3. ArchiMate的视角与视图 创建.维护一个企业架构是一件非常复杂繁琐的事情,因为这项工作需要面对许多背景.利益各异的干系人,对他们所关注的问题进 ...

  7. iOS由ImageIO.framework实现gif的系统解码

    首先先简单介绍一下gif的几个算是术语吧: frame(帧):一个gif可以简单认为是多张image组成的动画,一帧就是其中一张图片image. frameCount(帧数): 就是一个gif有多少帧 ...

  8. java实现验证码

    第一步:在web.xml中配置servlet <servlet> <servlet-name>ImageServlet</servlet-name> <ser ...

  9. iMac 无线键盘 无法配对

    正好小编手里也有一个 Apple wireless keyboard 键盘,经测试发现确实有他所说的问题.在互联网上找了一圈儿都没找到解决方案,苹果官方也没有给出相关方案.只好自己琢磨,还好终于研究出 ...

  10. 这几天有django和python做了一个多用户博客系统（可选择模板）

    这几天有django和python做了一个多用户博客系统(可选择模板) 没完成,先分享下 断断续续2周时间吧,用django做了一个多用户博客系统,现在还没有做完,做分享下,以后等完善了再慢慢说 做的 ...