div实际高度比img图片实际高度多出几px

在一个项目中实现轮播图效果,使用的swiper插件,项目要求图片四周展示要有圆角的效果。我使用border-radius实现,圆角虽然实现但是实际效果却并不理想,图片上方的两个圆角正常显示,下方两个圆角像是有一部分未显示出来一样,经查看div实际高度比img图片实际高度多出几px:

代码展示:

.box{ margin: 50px auto; width: 400px; overflow: hidden; border-radius: 30px; } 
.box img{ max-width: 100%; }

效果图展示:

后来我把border-radius代码加在图片上,这时效果完美实现,圆角问题解决,但是项目要求图片进行轮播时,不能出现空白(即图片在盒子内移动时,不能有圆角),所以我只能把圆角效果加在外面的div盒子上。这样又变回上面的问题,陷入死循环当中。

经过百度搜索后,终于找到原因图片的默认对齐方式是:vertical-align是baseline的。想要解决方法有以下三种:

1、调整对齐方式:

vertical-align: top|bottom;

2、调整盒子行间距:

line-height: 0px;

3、调整图片由行内元素变为块元素:

display: block;

效果展示如下:

本文链接:http://www.dreamcs6.com/2019-10-15-598.html

Author: 智宇愚

发表评论

电子邮件地址不会被公开。 必填项已用*标注