§ ITPOW >> 文档 >> CSS

说说 CSS 的 background-size

作者:vkvi 来源:ITPOW(原创) 日期:2021-12-13

background-size:cover;

如果图片不够大,则将图片等比例拉大。

如果图片足够大,则将图片等比例缩小。注意:足够大,也会缩小。

不管是拉大,还是缩小,最终:图片有一边与容器相等,另一边 >= 容器。

是以哪个点开始拉大、缩小,取决于 background-position。

background-size:contain;

如果图片不够大,则将图片等比例拉大。注意:不够大,也会拉大。

如果图片足够大,则将图片等比例缩小。

不管是拉大,还是缩小,最终:图片有一边与容器相等另一边 <= 容器

background-size:width height;

width、height 可使用百分比,或者数值,或者 auto

width、height 不可以是 cover、contain。

使用百分比时,100% 表示容器的尺寸,并不表示图片的原始尺寸。

使用 auto 时,表示根据另一个边,等比例计算出本边的尺寸。

使用一个参数时,表示的是 width。


相关文章