更新:2022-04-19
前端-CSS

background-size图片自适应

background-size :[ | | auto ]{1,2} | cover | contain ;
cover:		用于等比放大背景图;
contain:	用于等比缩小背景图(背景图需要大于被放的块,否则背景图任然会被放大);
auto:		默认值;

最好的使用代码

注意地址,我这在vue.config.js 配置了 @ = src 文件路径

background: url("~@/assets/bg_wjy/conference_pop.png") no-repeat center center;
background-size: 100% 100%;

解释:

1、 backgorund 设置背景

no-repeat:图片不平铺(图片不够大的时候,不会重复多张图片)
center:第1个,上下居中;第2个,水平居中;

2、backgorund-zise

100% 100%:水平垂直方向100%拉伸

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐