老师 有问题

老师 有问题

问题描述:

8分5秒处  请问为什么icon-img-content 的height设置为100%后  图标就能变小

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
MuFan 2021-05-23 03:26:08

补充一下我的理解

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

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

  • MuFan #1

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

    2021-05-23 03:37:26
好帮手慕久久 2021-05-14 17:40:04

同学你好,解答如下:

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

http://img1.sycdn.imooc.com//climg/609e428809bee75d13600304.jpg

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

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

http://img1.sycdn.imooc.com//climg/609e43a3091682a712740573.jpg

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

祝学习愉快!


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师