background-size cover和contain的区别

最新推荐文章于 2024-08-19 10:45:48 发布
最新推荐文章于 2024-08-19 10:45:48 发布
阅读量5.4w 收藏 17
点赞数 4
分类专栏： 切图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zchcode/article/details/42773581
版权

相同点：图片都是等比例缩放

不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示

比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示

 background:#ccc url(111.jpg) no-repeat center top; background-size: cover;


显示结果：

两边的去掉很多，如果图片很小就会放大到没有空白，其中一边就会不显示



contain：正好相反，他是按照某一边来覆盖显示区域的，会有白边

还是上面那张图，他按照宽度来适应显示区域，按照等比例那么高度就会很矮



背景图全屏展示方法：http://huilang.me/perfect-full-page-background-image/

太羽
关注
专栏目录
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2408
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
踩坑(css3+h5)_background-size属性
qq_43260366的博客
02-08 1492
图片并不能撑开盒子，要想显示背景图片，需要图片设置宽高或有足够的内容撑开盒子的前提下。[1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)图片宽高 小于等于 元素宽高 -> 正常展示(展示位置以及是否平铺需要看background-position以及background-repeat)
background-size： contain 与cover
hehexu_的博客
11-18 4665
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域 ...
background-size的取值有哪些？cover与contain有什么区别？
hu_lanlan的博客
11-06 2868
contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕)length：设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为“auto”。percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为
VSCode 背景插件 - background-cover 使用教程
最新发布
gitblog_00293的博客
08-19 433
VSCode 背景插件 - background-cover 使用教程 vscode-background-covervscode扩展，添加一张你喜欢的图片铺满整个vscode ..项目地址:https://gitcode.com/gh_mirrors/vs/vscode-background-cover 1. 项目目录结构及介绍 在GitHub仓库 https://github.com/ASh...
background-size:cover | contain；
04-12 1475
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
CSS background-size ：contain与cover区别
ee22ee的博客
01-30 1520
css background-size设置contain与cover区别
关于background-size的cover和contain
ttl1076005106的博客
12-30 502
1.cover:把背景图像扩展至足够大（非等比例的扩大），以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
background-size使用详解
09-25
background-size属性提供了多种设置方式，包括具体的长度值、百分比、以及两个特定的关键字：cover和contain。下面，我们将详细介绍background-size属性的各种用法。 首先，我们需要了解background-size属性的基本...
css3中背景尺寸background-size详解
01-19
定义：规定背景图像的尺寸 background-size的类型 background-size需要两个值，它的类型可以是像素（px）、百分比（%）或是...JavaScript语法：object.style.backgroundSize=60px 80px 语法： background-size: <
background-size：contain 与cover的区别（转载）
友人C君的博客
03-25 953
作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover（遮盖）：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain（包含）:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域； 2.在repeat情况下： ...
background-size： contain 与cover的区别，以及ie78的兼容写法
weixin_30699463的博客
02-22 179
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以...
background-size值：cover、100%和contain的区别
菜菜的博客
04-30 2万+
background-size 属性规定背景图像的尺寸。 先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形； 图片被横向拉伸 background-s...
background-size:contain与cover的区别
pwt_ymyg的博客
06-01 571
background-size:contain与cover的区别 background-size:contain与cover的区别： 不同之处： 1、在no-repeat情况下，如果容器宽高比与图片宽高比不同， cover:图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被裁掉；cover即为”塞满“ contain:图片自身的宽高比不变，缩放至整个图片自身能完全显示出来，所以容器会有留白区域。contain即为“包含”，我图片虽然缩放了，但是整个图是被“包含”在里面了，完整显示，不能裁剪。 2、在
CSS background-size contain 与cover的区别
Maggie的博客
03-17 9459
最近在重温CSS，发现好多东西都忘了，比如background－size属性中，contain与cover的区别。菜鸟教程上是这么说的： 有点难理解，通俗解释就是：两者均以保持图像宽高比的形式缩放来适合背景容器的大小。那么两者的区别呢？这就要根据图像是否重复来分别讨论了。在no-repeat情况下，如果容器宽高比与图片宽高比不同，　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分...
css中contain和cover的区别（转载）
m0_65247031的博客
01-30 1340
css中contain和cover的区别（转载）
说说background-size:cover;与background-size:contain的区别
热门推荐
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
background-size:cover;与background-size:contain;的区别
weixin_39413579的博客
04-01 664
作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...
背景图片设置
djp0910的博客
04-21 250
1.背景图片宽度问题 设置为背景图片的图片不够宽，采用的又是不重复的方式，以至于不能完全覆盖body或者父元素，这种情况下可以设置background-size; background-size:length|percentage|cover|contain; length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "au...
background-size: contain;与background-size: contain;的区别
03-13
抱歉，我可以回答这个问题。正确的写法应该是background-size: contain;与background-size: cover;的区别。background-size: contain;会将背景图像缩放到完全适合背景区域，但是可能会留下空白区域。而background-size: cover;会将背景图像缩放到完全覆盖背景区域，但是可能会裁剪掉部分图像。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

太羽

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值