白底图边缘怎么处理,解决图片底部白边

顺晟科技

2022-10-19 11:38:49

128

解决图片底部白边

当图片的父元素是一个块盒，且父元素高度自动即没有指定值，图片底部和父元素底边之间往往会出现空白。例：

<style>
    .contain {
        border: 1px solid black;
        width:301px;
    }

    img {
        width: 300px;
        height: 300px;
    }
</style>
<body>
    <div class="contain">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
            alt="">
    </div>
</body>

效果如下：

我们可以明显的看到图片与边框存在一个白边，那么我们要如何解决这个白边呢？解决方法有两种

将父元素的字体大小设置为0。将图片设置为块盒，也就是设置图片的display值为block。

下面我们将上述例子的父元素的字体大小设置为0

<style>
    .contain {
        border: 1px solid black;
        width:301px;
        font-size:0;
    }

    img {
        width: 300px;
        height: 300px;
    }
</style>
<body>
    <div class="contain">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
            alt="">
    </div>
</body>

可以看到底部的白边消失了。
下面我在来设置图片的display属性为block

<style>
    .contain {
        border: 1px solid black;
        width:301px;
    }

    img {
        width: 300px;
        height: 300px;
        display:block;
    }
</style>
<body>
    <div class="contain">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fpic%2F4%2F22%2Ffc5d1297286.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667473019&t=e32b81e0df453a6590cebe1880f57565"
            alt="">
    </div>
</body>

底部白边同样也消失了。

上一篇：css的盒模型是如何组成的 css的下一篇：vue自定义指令两种方式,利用Vue

网站建设

Css

白底图边缘怎么处理,解决图片底部白边

解决图片底部白边