background-size:cover | contain；

最新推荐文章于 2020-04-30 21:38:02 发布

曾经沧海难为水-除却巫山不是云

最新推荐文章于 2020-04-30 21:38:02 发布

阅读量1.4k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/cengjingcanghai123/article/details/45002177

版权

css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

background-size:cover | contain;

原图

不使用background-size

第一张背景图片：600 × 431
第二张背景图片：426 × 600
每个元素的大小：350 × 350

background-size:cover;

背景铺满元素

调整背景图片的宽度或高度（较小者），以铺满整个元素
保持背景图片的宽高比

background-size:contain;

元素包含整个背景图片

调整背景图片的宽度或高度（较大者），使背景图片完全包含在元素中
保持背景图片的宽高比

兼容小于IE9的浏览器

AlphaImageLoader 滤镜

filter: progid:DXImageTransform
.Microsoft.AlphaImageLoader
(src='.myBackground.jpg', 
sizingMethod='scale');

不要把IE滤镜应用到html和body上，会导致滚动条和链接出问题
不会保持背景图片的宽高比

参考资料

Supersize that Background, Please!
Background-size
Perfect Full Page Background Image
background

▶ Walkthrough007

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

曾经沧海难为水-除却巫山不是云

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

CSS3背景（background-size、background-origin、background-clip）圆角

m0_64460142的博客

04-04

2406

1.background-size，规定背景图像的尺寸当图片需要用背景图像设置需求时使用background：url（图片路径）使用，但是图片大小时原本图片的尺寸，伪类把它变成自己需求的尺寸就可以使用background-size。如下： <style> .box{ width: 400px; height: 200px; border: 2px solid rgb(76, 234, 234); ...

background-size： contain 与cover

hehexu_的博客

11-18

4664

一：background-size： contain 与cover的区别：作用：都是将图片以**相同宽高比**缩放以适应整个容器的宽高。不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同，　　cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；　　contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域 ...

参与评论您还未登录，请先登录后发表或查看评论

关于background-size的cover和contain

ttl1076005106的博客

12-30

501

1.cover:把背景图像扩展至足够大（非等比例的扩大），以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <s...

background-size值：cover、100%和contain的区别

菜菜的博客

04-30

2万+

background-size 属性规定背景图像的尺寸。先看看W3C的解释： background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比例，会有白边，图片不会变形图片右边有空白区域 background-size：100% 100%;---按容器比例撑满，图片变形；图片被横向拉伸 background-s...

background-size cover和contain的区别

湛庐无方

01-16

5万+

相同点：图片都是等比例缩放不同点：cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示比如下面这张图，宽比高大很多，使用cover那么两边的就不会显示 background:#ccc url(111.jpg) no-repeat center top; background-size: cover; 显示结果：两边的去掉很多，如果图片很小

background-size cover和contain的用法详解

weixin_30659829的博客

02-25

947

我们还可以通过background-size来控制背景图片的尺寸。 background-size有几个属性值，常用的是cover和contain。那么background-size：cover和contain二者之间有什么区别呢？下面学做网站论坛就来介绍一下background-size cover和contain的区别和用法。相同点：可以控制背景图片，并且背景图片尺寸都是等比...

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-...

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

03-13

正确的写法应该是background-size: contain;与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: contain; }这段css代码输出的图片被压缩了，旁边有留白

06-13

这段 CSS 代码中的问题在于 `.img-list .img` 的 `background-size` 属性被设置为 `contain`，这会导致图片被缩放并留白。如果您希望图片充满容器而不留白，您可以将 `background-size` 属性设置为 `cover`，这会将...

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

weixin_39413579的博客

04-01

663

作用：将图片以相同宽高比缩放以适应整个容器的宽高。 cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉（以铺满整个容器为主） contain：图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域（以显示完整背景图为主） ...

background-size：contain 与cover的区别（转载）

友人C君的博客

03-25

952

作用：都是将图片以**相同宽高比**缩放以适应整个容器的宽高。不同之处在于： 1.在no-repeat情况下，如果容器宽高比与图片宽高比不同，　　cover（遮盖）：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；　　contain（包含）:图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域； 2.在repeat情况下： ...

背景图片设置

djp0910的博客

04-21

250

1.背景图片宽度问题设置为背景图片的图片不够宽，采用的又是不重复的方式，以至于不能完全覆盖body或者父元素，这种情况下可以设置background-size; background-size:length|percentage|cover|contain; length:设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "au...

background-size的取值有哪些？cover与contain有什么区别？

hu_lanlan的博客

11-06

2868

contain：把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位中。(背景的宽度撑满整个屏幕)length：设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为“auto”。percentage：以父元素的百分比来设置背景图像的宽度和高度。如果只设置一个值，则第二个值会被设置为

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

Allenyhy的博客

09-04

3万+

1.background-size:cover 官方background-size:cover;的解释是这个样子的，截图如下所示：解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。 2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。下面举一个栗子来说明这种情况：首先原始的背景图片是这样的。而设置b...

CSS 背景尺寸 background-size属性

歪脖先生的博客

02-17

9603

背景尺寸在CSS3之前，我们不能指定背景图像的显示大小，一般是按图像的原始尺寸显示。在CSS3中，通过 background-size属性，可以设置背景图像的显示尺寸。background-size属性的值可以是预定义关键字 cover | contain，也可以是使用长度值、百分比或 auto 定义背景图像的尺寸，长度和百分比不允许负值。使用预定义值时，cover 表示背景图像完全覆盖容器的背景...

css之background的cover和contain的缩放背景图

weixin_30698297的博客

08-16

169

对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。读了还是不懂，那么看...

background-size属性详解