通过background-size:contain实现CSS背景图片background-image缩放后居中显示。 contain的优点是会保留背景图片的宽高比，不会被拉伸变形，所以适用于保留背景图片宽高比的需求中。
可以使用background-size属性来指定背景图片的大小,可以选择的值有:cover(保持图片比例,使背景图片充满整个元素)、contain(保持图片比例,使背景图片完全显示在元素内)、具体的像素值或百分比值。 可以使用background-position属性来指定背景图片的位置,可以选择的值有:left top、left center、left bottom、right top、righ...
background-image ：规定要使用的背景图像。2、设置背景图片的大小，可以保持原有尺寸，或拉伸到新的尺寸。或者再保持原有比例进行缩放。属性值：数值指定背景图片大小。百分比指定背景图片相对背景区的百分比。auto 以背景图片的比例缩放背景图片。cover缩放背景图片覆盖背景区。（不会被压扁）contain 缩放背景图片完全装入...
background-size用于设置填充图片的大小，属性值为关键字、百分比和数值。关键字有contain和cover，当background-size取值为contain时，如果图片尺寸大于元素尺寸，则缩小图片尺寸以适应元素的尺寸，图片按比例缩放；当background-size取值为cover时，则放大图片来适应元素的尺寸，图片按比例放大。修改上面网页代码的happiy样...
4.contain:把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 background-repeat: background-repeat:规定如何重复背景图像。默认地,背景图像在水平和垂直方向上重复。 1.repeat-x,repeat-y 背景图像将在水平方(垂直)向重复。 2.no-repeat:不重复。
<bg-size>= [<length>|<percentage>| auto ]{1,2} | cover | contain 默认值:auto auto // 背景图片的原始大小 扩展:W3C规范、MDN资料 示例: 1 2 3 4 5 background-size:100px;/* 背景图片宽度为100px,高度为auto */ background-size:100px50%;/* 背景图片宽度为100px,高度为容器高度的50% *...
可以设置为具体的长度值或百分比,也可以使用cover或contain来按比例缩放背景图片。 2. background-position属性 使用background-position属性可以调整背景图片的位置。可以设置为具体的像素值、百分比值或关键字,如left、right、top、bottom等。 3. background-repeat属性 背景图片默认会在元素中重复平铺,可以使用back...
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain 1. 默认值:auto auto // 背景图片的原始大小 扩展:W3C规范、MDN资料 示例: background-size:100px; /* 背景图片宽度为100px,高度为auto */ background-size:100px 50%; /* 背景图片宽度为100px,高度为容器高度的50% ...
background-size: length|percentage|cover|contain;length设置背景图像的⾼度和宽度。第⼀个值设置宽度，第⼆个值设置⾼度。如果只设置⼀个值，则第⼆个值会被设置为 "auto"。percentage以⽗元素的百分⽐来设置背景图像的宽度和⾼度。第⼀个值设置宽度，第⼆个值设置⾼度。如果只设置⼀个值...
试试background-size: contain;