background-size中，100%和cover的区别

background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器

background-size：100% 100%;---按容器比例撑满，图片变形；

background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。

当为百分比的时候，100%和100%，100%也会显示不一样的效果：

background-size:这个属性有两个值，第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的缩放比例或者px，如果只写一个值，则第二个值默认为auto(根据图片原来的比例，以及现有的宽度，来确定高度)
比方说：你有一张长宽比例为4:3的图片，有一个width:100px;height:50px;的盒子(也就是长宽比例为2:1)。
background-size:100% 100%;这种方式设置完背景图片的大小后，会完全铺满整个盒子，并且背景图片的比例会因此改变为2:1
background-size:100%;这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默认为auto，根据上面的理论计算得背景图片的高度为300px,但是盒子只有50px高，超出的部分隐藏，所以看两种写法的效果自然就不一样啦。
第一种效果你一定会看到完整的背景图片，但是有可能被挤压(失去图片原来的比例)
第二种效果你不一定能看到完整的图片，但是图片的比例没有发生变化。

background-size中，100%和cover的区别相关推荐

css中contain和cover的区别（转载）
不同之处在于: 1. 在no-repeat情况下,如果容器宽高比与图片宽高比不同, cover(遮盖):图片宽高比不变.铺满整个容器的宽高,而图片多出的部分则会被截掉: contain(包含):图片宽 ...
CSS中100%和inherit(继承)的区别，以及inherit的简单应用
CSS中100%和inherit(继承)的区别正常情况下没有区别兼容性 100% ie6+ inherit ie8+ 该元素绝对定位,父元素使用静态定位(static)或没有使用定位时 100%继 ...
CSS background-size contain 与cover的区别
最近在重温CSS,发现好多东西都忘了,比如background-size属性中,contain与cover的区别. 菜鸟教程上是这么说的: 有点难理解,通俗解释就是:两者均以保持图像宽高比的形式缩放来 ...
C#中struct和class的区别详解
本文详细分析了C#中struct和class的区别,对于C#初学者来说是有必要加以了解并掌握的. 简单来说,struct是值类型,创建一个struct类型的实例被分配在栈上.class是引用类型,创建 ...
c#中struct和class的区别
简单来说,struct是值类型,创建一个struct类型的实例被分配在栈上.class是引用类型,创建一个class类型实例被分配在托管堆上.但struct和class的区别远不止这么简单.本篇主要包 ...
Linux中线程和进程的区别
Linux中线程和进程的区别进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,它是系统进行资源分配和调度的一个独立单位.例如,用户运行自己的程序,系统就创建一个进程,并为它分配资源,包括 ...
python中bytearray和java中byte[]的区别_Python经典面试题：说说Python中xrange和range的区别？...
昨晚一小伙后台问xrange和range有啥区别,讲了下他倒领悟的挺快,其实这也是你各面试Python岗位,经常会遇到的Python面试题,长个心眼哈,说不定明年3月你找工作就用上了. 废话不多说,开 ...
mysql''和null,mysql中NULL和null的区别
接触php的web开发一段时间了,在进行数据库操作的时候经常会遇到一个问题,使得同一字段在页面显示时有3种类型NULL,null以及数字,当时的解决办法是将这一字段定义为varchar类型,在插入数据 ...
WPF中ControlTemplate和DataTemplate的区别
原文:WPF中ControlTemplate和DataTemplate的区别下面代码很好的解释了它们之间的区别: <Window x:Class="WPFTestMe.Window1 ...

background-size中，100%和cover的区别

background-size中，100%和cover的区别相关推荐

最新文章

热门文章