关于前端:解决图片底部白边

43次阅读

共计 1398 个字符，预计需要花费 4 分钟才能阅读完成。

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

<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>

底部白边同样也隐没了。

正文完