background-size: auto auto; background-size: 100% 100%; contain和cover的差异 如果图片的比例和元素的比例一致,两者看不出差异,但如果比例不一致,contain会出现图片覆盖不全的情况,而cover会出现剪切图片内容的情况。
css background-size 属性详解,background-size 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义: background-size 用来调整背景图像的尺寸大小。 2、语法: 以下...
background-size指定背景大小,以象素或百分比显示。当指定为百分比时,大小会由所在区域的宽度、高度,以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。 background-size可以设置2个值,1个为必填,1个为可选。第1个值用于指定背景图的width,第2个值用于指定背景图的height。 如果只给backgr...
background-size: cover //缩放背景图片以完全覆盖背景区,可能背景图片部分看不见 background-size: contain //缩放背景图片以完全装入背景区,可能背景区部分空白 /一个值: 这个值指定图片的宽度,图片的高度隐式的为auto/ background-size: 50% //相对背景区【由background-origin设置】的百分比 background-size:...
/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first va...
background-size:contain: The background-size property is specified in one of the following ways: 1.Using the keyword valuescontainorcover. 2.Using a width value only, in which case the height defaults toauto. 3.Using both a width and a height value, in which case the first sets the wi...
start*/body{height:100%;opacity:0.9;background-position:right;background-size:contain;background-...
背景图片尺寸宽度和高度完全适应内容区域(background-size:contain) 其实就是背景图会根据自身的宽高比例进行缩放,好处是图片不会严重变形,造成太扁或者太窄,但是缺点也很明显,很容易导致背景有空白。演示代码: 可以看到背景图片是完全没有变形的,依然按照本身尺寸比例进行缩小,如果父...
contain (contain)Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.cover (cover)Scale the image, while preserving its intrinsic aspect ratio (if any), to the ...
background-size 可以使用关键字、百分比或长度指定。 cover:将图像缩放到尽可能大的位置,但不会拉伸图像。它还可以垂直或水平裁剪图像以覆盖任何空白区域。 contain:将图像缩放到尽可能大的位置,但不会裁剪或拉伸图像。 auto:按相应方向缩放图像,使图像保持其原始比例 默认值 background-size 的默认...