css 中 background-size 属性

目录： background-size属性介绍 演示代码 background-size属性分析 设置固定尺寸的背景图片 背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放 背景图片扩展并覆盖填充满整个所属元素区域 背景图片尺寸宽度和高度完全适应内容区域 一、background-size属性介绍 CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...

background-size设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸. /* 关键字 */ background-size: cover background-size: contain /* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */ background-size: 50% ...

将使背景图片缩放至最大尺寸，同时保持其原始的宽高比，以确保图片完全适应容器元素。这个例子将一个名为image.jpg的背景图片应用到一个div元素上，并使用contain属性值来缩小图片以适应div元素的尺寸。：这些值分别将属性设置为其初始值或从父元素继承值，但它们在实际使用中较少见，因为通常你会想要明确指定背景图片的大小。contain：将背景图片缩小以适应元素的尺寸，同时保持图片的长宽比。如果容器元素的宽高比与图片的宽高比不同，图片将被裁剪以适应容器。百分比是相对于容器元素的宽度和高度的。

当前有循环li元素；每个li元素代表 抖音、微博、小红书、快手四个媒体中的一个；不同媒体在li元素中右上角logo不同；

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

1 length固定值 背景图片宽度 背景图片高度 如果只有一个值，第二个设为auto 2 百分比 背景图片对于背景定位区域宽度的百分比 背景图片对于背景定位区域高度的百分比 如果只有一个值，第二个设为auto 3 cover 保持图像纵横比，并将图像缩放成完全覆盖背景定位区域的最小大小，多余部分不会显示 4 contain 保持图像纵横比，并将图像缩放成适合背景定位区域的最大大小，可能会存在白边 ...

background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin 的位置决定，还可以通过 cover 和 contain 来对图片background-size 属性1、定义：background-size 用来调整背景图像的尺寸大小。 2、语法：以下为引用内容： background-size :

属性允许你定义背景图片的大小，以适应元素的尺寸和页面布局。该属性能够通过多种方式设定背景图像的缩放比例，提供了从完全覆盖到按比例缩放的多种方案。auto：默认值，保持背景图片的原始大小。cover：背景图片将被缩放到足够大，以完全覆盖元素的背景区域，即使图片会被裁剪。contain：背景图片将被缩放到足够小，以完整显示在元素背景中，且不会被裁剪。指定尺寸：你可以直接设定背景图片的宽度和高度，如或50% 50%，甚至还支持calc()函数进行动态计算。属性为开发者提供了强大的背景图像控制能力。

在生活中size无处不在，某些时候，size很重要……嗯嗯…….我说的是background-size，想歪的同学可以去静静的面壁了。先不管面壁的同学，我们来探探background-size的奥秘。小时候，看过《西游记》之后，做梦都在想着自己也能够拥有孙悟空那能大能小的金箍棒，感觉很是神奇。长大后才发现那只是童话故事，于是不再做梦。做了技术之后，我的梦又延续了，因为技术真的可以做到能大能小。bac

文章来自：源码在线https://www.shengli.me/css/589.html   CSS3中可以指定背景图片，让我们重新在不同的环境中指定背景图片的大小。您可以指定像素或百分比大小。 你指定的大小是相对于父元素的宽度和高度的百分比的大小。     代码：   效果图：          ...

以前前端开发时写过一篇html 标签内背景图片自适应div大小，用到了background-size属性，其实也就停留在刚好用来“救急”的地步，并未仔细了解。 其实background-size属性是个CSS3属性，IE9+才支持，自己做做小项目就罢了，在大公司需要考虑兼容性的情况下随手就用往往弄巧成拙。他还有五个不同取值——默认值auto、length、percentage、cover、con...

1.auto图片原始尺寸 2.number自己设置具体的值 例：background-size:100px 100px; 3.percentage设置百分比 0-100% 4.cover铺满整个容器（图片比容器小） 图片比容器小又不想background-repeat时，一张图铺满容器。但是会图片失真。 5.contain铺满整个容器（图片比容器大） 与cover相同会图片失真。 ...

background-size 设置背景图片大小 图片可以保存其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有的比例的同时缩放到元素的可用空间 的尺寸； 标签定义及使用说明 background-size属性指定背景图片大小。 默认值: auto 继承: no 版本: CSS3 JavaScript 语法: objectobject.style.backgroundSize="60px 80px" 语法 background-size: ...