解决div标签中放img图片后，图片显示不全的问题

前言

想实现一个类似qq头像的效果，将方形图片放到圆形div中，设置overflow:hidden，超过的地方隐藏，代码如下。但是出现了问题，只显示了图片的一部分。（有时候会在图片下方出现空白）

1.html代码

<div class="round">
     <img src="images/icon5.jpg" class="icon">
</div>

2.css代码 

.round{
         
         width:10px;
         height:10px;
         border-radius: 50%;
         overflow: hidden;
             
}
 .icon{
          width:100%;
          height:100%;            
}

问题解决

当把div的宽和高设置的大一些，比如20px，就可以显示完全。这跟图片原始大小是有关系的。但有时候根据布局安排，div的大小不能太大。

这边的解决办法是：在img标签中设置display:block;

原因解释：https://mor10.com/removing-white-space-image-elements-inline-elements-descenders/

这边对上面链接的内容做一下大概的解释。

在文字排版中，英文字母可以分为三类，如下图所示。

其中，o、r、a在基线和中位线之间，其他字母有升序（f、i）和降序（g）。

当放置img图片时，图片下方与基线对齐，为下级部分留出空间。

在HTML中，img标签是一个内联元素，也就是它被浏览器视为文本。当在页面上放置文本时，通常会为下级留出空间。将其改为块级元素后问题解决。