【05月30日知识点】1.图片的两种策略

😇😁😆🥳😘😘😘

作者：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地址：https://github.com/forFishbonein

💞 喜欢的话就给个三连💫吧，谢谢您的支持！✿✿ヽ(°▽°)ノ✿

You are more than what you have become and remember who you are！ 本文由博客一文多发平台 OpenWrite 发布！