浅谈图片展示、图片自适应解决方案

导读

我们在日常开发中会遇到展示图片的问题，图片拉伸、图片残缺、有空白、大小不一致都是问题
所以我们如何更好得展示图片，就引出我们这篇文章的主题

CSS 解决方案

background-size

🐷background-size: contain；

💌 background-size：contain；等比缩放，按照某一边来覆盖显示区域的，若区域大于图片的比
例，会有白边，图片不会变形

<div class="img_box">
</div>
<script>
</script>
<style>
    .img_box {
        width: 100px;
        height: 100px;
        background-image: url('./1.jpg');
        background-size: contain;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12

🐥就是说，其实这种也是不是很好用的，就相当于把某一边宽度为100%，但是另一边就按照比例，就很容易造成有白边（我这里加了个底色）

🐷background-size：100%；

💌 background-size：100%;相当于background-size：100% auto的写法。
💌 background-size:100% 100%;这种方式设置完背景图片的大小后，会完全铺满整个盒子，
💌 background-size:100%;这种方式设置的背景图片的大小,x轴会和盒子一样的宽，但是y轴由于默
认为 auto

🐷background-size:cover;

这中是比较好的方案
首先会充满盒子，不变形，但是会把多余的进行裁剪

<div class="img_box">
</div>
<script>
</script>
<style>
    .img_box {
        width: 100px;
        height: 100px;
        background-color: red;
        background-image: url('./1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

object-fit

这个属性，我们主要讨论下面这种情况

<div class="img_box">
    <img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    img{
        width: 100%;
		height: 100%;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

可以看到会产生拉伸

🐷object-fit: contain；

🐥可以看出和上面的background-size:contain;特点一样，会按照某一边，不会拉伸，但是比例不匹配会产生白边（我这里依然是红边）

<div class="img_box">
    <img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    img{
        width: 100%;
		height: 100%;
        object-fit: contain;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

🐷object-fit: cover；

🐥可以看出，不会拉伸，但是会对图片进行剪切

<div class="img_box">
    <img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    img{
        width: 100%;
		height: 100%;
        object-fit: cover;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

进而探讨图片跟随屏幕大小自适应的问题

我们设想一个问题，就是页面一个图片，咱们想把图片自适应屏幕宽度，进行完整更好的展示

<div class="img_box">
    <img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        width: 1000px;
        height: 800px;
        background-color: red;
    }
    img{
        width: 100%;
		height: 100%;
        object-fit: cover;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

🐥拉伸边框会出现这样，明显不是咱们想要的

只设宽度方案，优化方案

我们如下代码，只设置宽度，虽然看上去不错，但是依然是不完善的

<div class="img_box">
    <img src="./1.jpg" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        width: 100%;
        background-color: red;
    }
    img{
        width: 100%;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

🐥其实这里我们可以进而去控制img元素的父盒子，去控制父盒子的宽度自适应，可以设置display:inline-block;简单的控制父元素宽度(宽度也是随内容变化的，而且图片默认样式恰巧也表现为inline-block的效果)，可以看下图的变化，就很nice

<div class="img_box">
    <img src="./1.png" alt="">
</div>
<div class="img_box">
    <img src="./2.png" alt="">
</div>
<script>
</script>
<style>
    .img_box {
        background-color: red;
        display: inline-block;
    }
    img {
        width: 100%;
        vertical-align: middle;

    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19