2回答

MuFan

2021-05-23

补充一下我的理解

icon-img设置了绝对定位后，虽然没设置宽度高度，但是同时设置了left right还有top bottom，这就把它的宽度高度给拉起来了。同时设置left right为0，也就是距离父级元素的左边右边都为0，这就把icon-img的宽度拉到和它的父级icon一样了。设置top bottom也同理。

icon-img-content的父级元素是icon-img，所以百分比高度是以icon-img的高度为基准的。

0

huFan

hp>关于top bottom也要说明一下。icon元素高度为0，icon-img设置的top bottom看上去并不等把它的高度拉起来，这是因为icon元素是有padding高度的。有一个要注意的点：position: absolute绝对定位不是以设置了定位父级的content区域四边作为起点的，而是以padding区域的四边作为起点的。

h021-05-23

共1条回复

好帮手慕久久

2021-05-14

同学你好，解答如下：

如果不给图片设置宽高，而图片会按照原始大小来显示，由于图片原始比较大，所以未设置宽高时，效果如下:

图片有原始宽高比，它的值=图片原始的宽度/图片原始的高度；当只改变图片的宽度时，图片的高度会按原始宽高比自动缩放，只改变高度时，宽度同理。

给icon-img-content设置高度百分百的意思是让图片的高度与父元素icon-img一样，而icon-img此时高度是71px左右，所以图片的高度也是71px左右：

71px小于图片的原始高度，因此图片的宽度会按原始宽高比对应缩小，所以图片整体小了。

祝学习愉快！

0