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 网格系统

    自版本 2.3.2 起,Bootstrap 提供了两种类型的网格,默认网格系统和流动网格系统.默认的网格系统是 940px 宽和 12 列.本文主要讲解第一种. 首先让我们看,怎么来应用默认网格系统 ...

  2. ftp服务器的搭建

    /etc/vsftpd.conf :ftp的配置文件 anonymous_enable=YES:是否支持匿名登录 local_enable=YES:是否支持本地登录 /etc/ftpusers:ftp ...

  3. 在线web编辑器

    真正在线编辑的在线web编辑器 最近正在研究开发一款在线web编辑器架构,这是一款真正傻瓜式的web编辑器,可以在正常浏览页面的情况进行编辑,经过测试,对于一般网页页面来说非常好用方便,操作更简单. ...

  4. 变易算法 - STL算法

    欢迎访问我的新博客:http://www.milkcu.com/blog/ 原文地址:http://www.milkcu.com/blog/archives/mutating-algorithms.h ...

  5. 《剑指Offer》面试题-从头到尾打印链表

    题目描述: 输入一个链表,从尾到头打印链表每个节点的值. 输入: 每个输入文件仅包含一组测试样例.每一组测试案例包含多行,每行一个大于0的整数,代表一个链表的节点.第一行是链表第一个节点的值,依次类推 ...

  6. Apache指南：CGI动态页面

    概要 相关模块 相关指令 mod_alias mod_cgi AddHandler Options ScriptAlias CGI(公共网关接口[Common Gateway Interface])定 ...

  7. 设计适用于SOA的类型（二）

    接着上次的,以扩展String类型为例,继续根据自己的使用习惯闭门造车!   这一次我重载了运算符 = 和 + ,我觉得这样更方便我的使用.首先先贴代码: /// <summary> // ...

  8. hive UDAF开发入门和运行过程详解（转）

    介绍 hive的用户自定义聚合函数(UDAF)是一个很好的功能,集成了先进的数据处理.hive有两种UDAF:简单和通用.顾名思义,简单的UDAF,写的相当简单的,但因为使用Java反射导致性能损失, ...

  9. 认识WinDbg

    WinDbg学习笔记(一)--认识WinDbg 一.前言    本人学习WinDbg已经有好几天了,虽说技术掌握的还不太熟练,不过也总算是入门了在学习WinDbg的过程中,觉得WinDbg真的比Oll ...

  10. SQLSERVER清空(Truncate)被外键引用的数据表

    前言:我们知道SQLSERVER清空数据表有两种方式Delete和Truncate,当然两者的不同大家也都知道(不清楚的可以MSDN).不过这个错误“Cannot truncate table  be ...