😇😁😆🥳😘😘😘
作者：Fishbone
🍇🍈🍉🍊🍋🍌🍍🥭🍎🍏🍐🍑🍒🍓🥝🍅🥥🥑
1.图片的两种策略
今天新学到的：li+css的background（轮播图、介绍产品的大页面等常用）
background: url("../../assets/images/about/qjf.jpg") no-repeat center;
background-size: cover;
下面我们来对比一下两种写法：
img写法：
li {
width: 100vw;
height: 100vh; //100vh这个代替高度100%很好用，可以直接获取整个屏幕的高度！
img {
display: block;
width: 100%;
height: 100%;
}
}
background写法：
li {
width: 100vw;
height: 100vh;
&.bg1 {
background: url("../../assets/images/about/qjf.jpg") no-repeat center;
background-size: cover;
}
}
那么具体怎么选择？
图片要铺满屏幕或一个区域的时候就用background
图片只需要作为一个区域的一小部分那么就用img
结尾
🌻版权申明
博客中的每篇文章基本都是原创，部分借鉴内容由于忘记出处没有进行标注，如有问题可与本人邮箱进行联系。如需转载，请附上原文链接。谢谢合作！
📃排版
本文参照中文文案排版指北进行排版。
🏆结尾
🤓 欢迎关注微信公众号：鱼骨编程
😊 个人github地址：github.com/forFishbone…
💞 喜欢的话就给个三连💫吧，谢谢您的支持！✿✿ヽ(°▽°)ノ✿
You are more than what you have become and remember who you are！ 本文由博客一文多发平台 OpenWrite 发布！
