＜img＞踩坑

最新推荐文章于 2024-07-24 13:45:34 发布

写bug的bug

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量144

点赞数 1

分类专栏： css&html 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_45697717/article/details/129088166

版权

1 篇文章 0 订阅

订阅专栏

一、img与父级底部会出现空隙

想必大家都遇到过这种情况，这种现象会出现在img与文字有共同父级且渲染在同一行的时候。
alt
html：

<body>
    <div class="content">
        <img class="content__img"src="../images/gaoqiqiang.jpg" alt="">
        我想吃鱼了
    </div>
</body>

css：

.content{
        width: 600px;
        &__img{
            width: 100px;
            height: 100px;
        }
    }

我们会发现图片与底部会有空隙，这是因为图片没有基线，默认设置的vertical-align: baseline会导致图片的底部与父级的基线对齐，所以与父级底部就会有空隙。

基线如图所示：
在这里插入图片描述

vertical-align: middle

在这里插入图片描述

line-height: 20px

在这里插入图片描述

display: flex or float: left

在这里插入图片描述

试想这种情况，当图片需要作为头像使用且有固定宽高时，如果我们设置为固定的宽高会导致图片压缩变形。

在这里插入图片描述
css：

 &__img{
    width: 80px;
    height: 100px;
 }

其中一种比较好的解决方法是将css属性object-fit和object-position配合使用，我们可以设置object-fit：cover并使用object-position调整位置。
在这里插入图片描述
css:

 &__img{
     float: left;
     width: 80px;
     height: 100px;
     object-fit: cover;
     object-position: left bottom;
 }

这样不会导致图片的拉伸或压缩，可以较好的展现需要设置固定宽高的情况。

关注

专栏目录