background-size： contain 与cover

于 2020-11-18 09:19:04 发布
阅读量4.6k 收藏 4
点赞数 3
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hehexu_/article/details/109764211
版权

一：background-size： contain 与cover的区别：

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

不同之处在于：
1.  在no-repeat情况下，如果容器宽高比与图片宽高比不同，

　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；

　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域

hehexu_
关注
专栏目录
踩坑(css3+h5)_background-size属性
qq_43260366的博客
02-08 1488
图片并不能撑开盒子，要想显示背景图片，需要图片设置宽高或有足够的内容撑开盒子的前提下。[1] 当元素没有设置background-size属性，或是设置background-size:auto auto时，会按照图片默认的宽高进行展示图片宽高 大于 元素宽高 -> 超出元素宽高的图片会被截断(不显示)图片宽高 小于等于 元素宽高 -> 正常展示(展示位置以及是否平铺需要看background-position以及background-repeat)
CSS3背景（background-size、background-origin、background-clip）圆角
m0_64460142的博客
04-04 2404
1.background-size，规定背景图像的尺寸 当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...
background-size:cover | contain；
04-12 1474
background-size:cover | contain; 原图 不使用background-size 第一张背景图片：600 × 431第二张背景图片：426 × 600每个元素的大小：350 × 350 background-size:cover; 背景铺满元素 调整背景图片的宽度或高度（较小者），以铺满整个元素保持背景图片的宽高比
CSS 背景尺寸 background-size属性
歪脖先生的博客
02-17 9602
背景尺寸在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。background-size属性的值可以是预定义关键字 cover | contain，也可以是使用长度值、百分比或 auto 定义背景图像的尺寸，长度和百分比不允许负值。使用预定义值时，cover 表示背景图像完全覆盖容器的背景...
background-size： contain 与cover的区别，以及ie78的兼容写法
weixin_30699463的博客
02-22 178
一：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时图片高清无损，但是无法沾满整合容器，background-size: cover可以沾满容器但是不高清。我现在想要高清的同时沾满容器，也就是说我要使用background-size: contain的同时沾满容器
最新发布
07-09
如果你想同时使背景图片高清且填充整个容器，可以使用`background-size: contain`和一些额外的CSS样式来实现。以下是具体的步骤： 1. 在`<el-card>`上添加一个自定义的类名，例如`card-with-bg`： ```html <el-card...
background-size: contain;与background-size: contain;的区别
03-13
与background-size: cover;的区别。background-size: contain;会将背景图像缩放到完全适合背景区域，但是可能会留下空白区域。而background-size: cover;会将背景图像缩放到完全覆盖背景区域，但是可能会裁剪掉部分...
.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和contain
ttl1076005106的博客
12-30 501
1.cover:把背景图像扩展至足够大（非等比例的扩大），以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...
背景图片设置
djp0910的博客
04-21 250
1.背景图片宽度问题 设置为背景图片的图片不够宽，采用的又是不重复的方式，以至于不能完全覆盖body或者父元素，这种情况下可以设置background-size; background-size:length|percentage|cover|contain; length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "au...
background-size cover和contain的区别
湛庐无方
01-16 5万+
相同点：图片都是等比例缩放 不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示 比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示 background:#ccc url(111.jpg) no-repeat center top; background-size: cover; 显示结果： 两边的去掉很多，如果图片很小
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: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 663
作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...
background-size cover和contain的用法详解
weixin_30659829的博客
02-25 945
我们还可以通过background-size来控制背景图片的尺寸。 background-size有几个属性值，常用的是cover和contain。那么background-size：cover和contain二者之间有什么区别呢？ 下面学做网站论坛就来介绍一下background-size cover和contain的区别和用法。 相同点： 可以控制背景图片，并且背景图片尺寸都是等比...
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
CSS3 新属性篇(五)：background-size属性
madman0621的博客
10-03 2万+
目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值