background-size:cover;与background-size:contain;的区别

最新推荐文章于 2023-11-14 15:04:09 发布
最新推荐文章于 2023-11-14 15:04:09 发布
阅读量665 收藏 6
点赞数 1
分类专栏： css 文章标签： css css3 background-size cover contain
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39413579/article/details/88947601
版权

作用：将图片以相同宽高比缩放以适应整个容器的宽高。

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主）
contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主）
在这里插入图片描述

一抹朱丹红
关注
专栏目录
background-size中100%和cover的区别？
m0_38109616的博客
03-28 1216
background-size中100%和cover的区别？ background-size：100% 100%;—按容器比例撑满，图片变形； background-size：cover;—把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。 当引入背景图片，高度和宽度设置成100%时，图片还是很大，可以设置background-size:cover;使图片放大到适合元素容器的尺寸！ ...
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2410
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
完美的背景图全屏css代码 – background-size:cover?
热门推荐
03-26 4万+
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法 需要的效果 图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比（图片不变形）图片居中不出现滚动条多浏览器支持 以图片bg.jpg为例 最简单，最高效的方法 CSS3.0 归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和cente
CSS之Background-size:cover
KK_2018的技术博客_程序员不止是程序员
12-04 2804
background-size:100% 100%把背景图进行横向和纵向的拉伸，图片比例随之改变，可能导致图像失真 background-size: cover把背景图扩展至足够大，直至完全覆盖背景区域，图片比例保持不变且不会失真，但某些部分被切割无法显示完整背景图像 一般和如下语法连用 background-image: url(../images/1.png); background-...
background-size:cover和background-size: contain的区别
Hiroshi's
02-01 327
对于这样的一个div: <div class="item-del"></div> .item-del{ width: 14px; height: 12px; background: url(/imgs/icon-close.png) no-repeat center; background-size: cover; flex: 1; } 如果我们设置background-size:cover: 就相当于这个背景图片在所在div的宽高范围内伸展到div的边
background-size: cover；
最新发布
fury的博客
11-14 212
当一个界面的图片不能覆盖界面的时候,会出现多个图片重复,这时候设置background-replace:no-replace不行,查询了一下需要设置background:cover就实现了。
background-size: contain;与background-size: contain;的区别
03-13
与background-size: cover;的区别。background-size: contain;会将背景图像缩放到完全适合背景区域，但是可能会留下空白区域。而background-size: cover;会将背景图像缩放到完全覆盖背景区域，但是可能会裁剪掉部分...
background-size: contain时图片高清无损，但是无法沾满整合容器，background-size: cover可以沾满容器但是不高清。我现在想要高清的同时沾满容器，也就是说我要使用background-size: contain的同时沾满容器
07-09
如果你想同时使背景图片高清且填充整个容器，可以使用`background-size: contain`和一些额外的CSS样式来实现。以下是具体的步骤： 1. 在`<el-card>`上添加一个自定义的类名，例如`card-with-bg`： ```html <el-card...
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; */ } ul{ list-style-type: none ; } .img-list .img { /* float: left; */ height: 300px; margin-right: 1%; /* margin-bottom: 10px; */ display: block; /* background-position: center; */ background-repeat: no-repeat; background-size: cover; object-fit: cover; /* -o-object-fit: contain; */ }这段css代码输出的图片不完整
06-13
2. 可能是使用了`background-size: cover;`属性，导致图片被拉伸或者裁剪，从而导致图片不完整。可以尝试使用`background-size: contain;`属性来保持图片的原始比例，但是会留有空白区域。 3. 可能是使用了`object-...
.list-container li .img-list { width: 100%; margin-top: 10px; /* position: relative; / } ul{ list-style-type: none ; } .img-list .img { / float: left; / height: 300px; margin-right: 1%; / margin-bottom: 10px; / display: block; / background-position: center; */ background-repeat: no-repeat; background-size: contain; }这段css代码输出的图片被压缩了，旁边有留白
06-13
这段 CSS 代码中的问题在于 `.img-list .img` 的 `background-size` 属性被设置为 `contain`，这会导致图片被缩放并留白。如果您希望图片充满容器而不留白，您可以将 `background-size` 属性设置为 `cover`，这会将...
说说background-size:cover;与background-size:contain的区别
Allenyhy的博客
09-04 3万+
1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示： 解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。             2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。 下面举一个栗子来说明这种情况： 首先原始的背景图片是这样的。 而设置b...
CSS 的background-size：cover属性值和contain属性值
单枪匹码
12-12 1万+
1、语法：background-size：length|percentage|cover|contain； 2、参数：参考文章：菜鸟教程 3、浏览器支持： 4、标签定义及使用说明： 5、通常情况下都是使用第1个和第2个属性值，那么后两个如何使用呢？我们来写一个小demo记录一下： <div id="div4"></div> #div4{ width: 1000px...
background-size： contain 与cover
hehexu_的博客
11-18 4676
一：background-size： contain 与cover的区别： 作用： 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。 不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同， 　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉； 　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域 ...
background-size:cover | contain；
04-12 1479
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
CSS 背景图自动缩放background-size: cover；
HandsomeDanielWu的博客
10-07 1470
CSS 背景图自动缩放background-size: cover;
background 互联网图片_完美的背景图全屏css代码 – background-size:cover?
weixin_36263738的博客
12-30 457
在写主题样式的时候经常会碰到用背景图铺满整个背景的需求，这里分享下使用方法需要的效果图片以背景的形式铺满整个屏幕，不留空白区域保持图像的纵横比(图片不变形)图片居中不出现滚动条多浏览器支持以图片bg.jpg为例最简单，最高效的方法 CSS3.0归功于css3.0新增的一个属性background-size，可以简单的实现这个效果，这里用fixed和center定位背景图，然后用background...
css中background-size属性cover、contain、100%的含义案例详解
wangyining070205的博客
02-14 7641
昨天学前端，看到 css中的background-size属性，忽然对cover、container属性值有点蒙，具体到底什么显示效果有点糊涂。 看了菜鸟教程的解释，还是不太明白。于是自己做了一个案例来验证，除了background-size：cover、background-size：container，还有background-size：100% 100%，通过这个案例，总算把这三者的区别弄明白了。现分享给大家，希望对初学者有所帮助。 一、背景区域和背景图像宽高比例相等 在div中，设置其背景图像，如果
background-size值：cover、100%和contain的区别
菜菜的博客
04-30 2万+
background-size 属性规定背景图像的尺寸。 先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形 图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形； 图片被横向拉伸 background-s...
background-size
coolchaobing的博客
07-30 269
认识background-size
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值