background-size值为100% 100%和cover的区别

background-size:100%100%;---按容器比例撑满,图片变形;

background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变。

下图是添加background-size:100% 100% 后的背景图效果,背景图被拉伸后有点失真

  

下图是添加background-size: cover 后的背景图效果,背景图被拉伸后背景图不能全部显示

  

它们的区别:

background-size:100% 100%把背景图进行横向和纵向的拉伸,图片比例随之改变,可能导致图像失真(建议让UI给原始背景图,否则容易出现图片拉伸后失真)
background-size: cover把背景图扩展至足够大,直至完全覆盖背景区域,
图片比例保持不变且不会失真,但某些部分被切割无法显示完整背景图像

原文地址:https://www.cnblogs.com/edczjw-Edison/p/12610623.html

时间: 2024-10-11 20:59:50

background-size值为100% 100%和cover的区别的相关文章

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

background-size中,100%和cover都是用于将图片扩大或者缩放来适应整个容器 background-size:100% 100%;---按容器比例撑满,图片变形: background-size:cover;---把背景图片放大到适合元素容器的尺寸,图片比例不变,但是要注意,超出容器的部分可能会裁掉. 当为百分比的时候,100%和100%,100%也会显示不一样的效果: background-size:这个属性有两个值,第一个值为x轴方向的缩放比例或者px,第二个值为y轴方向的

shell编程基础一(多种方法求值1+2+..+100)

#SHELL编程基础一(多种方法求值1+2+..+100)##为什么要学好shell shell脚本语言是实现linux系统管理及自动化运维所必备的重要工具,linux系统的底层及基础应用软件的核心大都涉及shell脚本的内容. 每一个合格的linux系统管理员或运维工程师,都需要能够熟练地编写shell脚本语言,并能够阅读系统及各类软件附带的shell脚本内容. 只有这样才能提升运维人员的工作效率,适应日益复杂的工作环境,减少不必要的工作,从而为个人的职场发展奠定较好的基础.# 本文的宗旨是熟

[转载] 在java中为什么变量1000 = 1000 返回false,但是100=100返回true?

ps:题目的意思是指定义相同内容的不同变量之间的==比较.如果直接比较(1000 == 1000)的结果是true. 运行以下代码: Integer a = 1000, b = 1000; System.out.println(a == b); Integer c = 100, d = 100; System.out.println(c == d); 结果是: false true 我们知道,如果两个引用指向不同的对象,即使对象拥有相同的内容时,他们用==比较的结果就是不相等(返回false).

为什么Java中1000==1000为false而100==100为true?

为什么Java中1000==1000为false而100==100为true? 这是一个挺有意思的讨论话题. 如果你运行下面的代码: 基本知识:我们知道,如果两个引用指向同一个对象,用==表示它们是相等的.如果两个引用指向不同的对象,用==表示它们是不相等的,即使它们的内容相同. 因此,后面一条语句也应该是false . 这就是它有趣的地方了.如果你看去看 Integer.Java 类,你会发现有一个内部私有类,IntegerCache.java,它缓存了从-128到127之间的所有的整数对象.

【Todo】Java学习笔记 100==100 & Reflection API & Optional类详解 & DIP、IoC、DI & token/cookie/session管理会话方式

为什么1000 == 1000返回为False,而100 == 100会返回为True?   Link Java Reflection API:Link Java8 Optional 类深度解析: Link 深入理解DIP.DI及IoC容器: Link 3种会话管理的方式: Link

height:100%和height:auto的区别

一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成height:auto就好了,百度过这个问题,却一直没有细看. 今天又浮现了同样的问题,百度细看和群里的朋友指点,终于明白其中的道理,记录一下. height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度

数独100*100的第一个结果 sudoku100*100

数独100*100的第一个结果  sudoku100*100 数独100*100是能够实现的,下面是第一个结果 版权声明:本文为博主原创文章,未经博主允许不得转载.

background-size:100% 100% 时 background-position: % 失效

背景知识: background-size background-position 难题: background-size 为 100% 100% 时,background-position 部分失效: 示例 <div class="content">content</div> .content { width: 200px; height: 200px; background-color: pink; background-image: url('https:

CPU100%不限性能和100%独享资源的区别

CPU100%不限性能和100%独享资源的区别是什么,最近这类问题突然激增,这里为大家科普一下 1,什么是独享100%独享资源通常看到独享100%资源的云服务器是S1.S2名称,像阿里云双十一和阿里云双十二的都有这样服务器的区别,通常也被称之为"计算网络增强型sn1ne实例". 2,什么是100%CPU性能这类一般我们看到的是共享基本型xn4和共享计算型n4实例,例如阿里云双十一和双十二活动里看到的.从价格上看,一般是独享100%资源的价格比较高的,这个就相当于一个CPU个人用,而10