background-size 详解

2024-09-01 11:17:20

backgroun-size:cover;

.是按照等比缩放铺满整个区域。主要用于图片比div小的时候，将图片按照某一边的比例扩大以填充整个div背景。

.优点：图片不会被拉升，且实用于div长度和宽度的比例合适时候

.缺点：图片会失真，且当宽度和高度比例过大时候，会出现图片显示不全。

backgroun-size:contain：

.也是等比缩放，按照某一边来覆盖显示区域的，会有白边。

.优点：图片不会拉升，且适用于图片比div大时候。

.缺点：有白边

background-size:100% 100%；

.长宽100%显示，可能会拉升图片。

.优点：能使得图片完全在div中显示出来。

.缺点：可能造成图片拉升和失真。

最新文章

热门文章