这节课的overflow:hidden有什么用处?

这节课的overflow:hidden有什么用处?

这节课的overflow:hidden有什么用处?

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

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

2回答
好帮手慕夭夭 2020-05-21 14:37:16

同学你好,问题解答如下:

1.如果图片设置固定高度,在不同设备下,宽度显示的是不一样的。那么图片显示的比例也会不一样了。

2.这里老师的处理方式是,给容器设置高度为0,然后设置padding-bttom撑开高度。因为置padding-bttom设置百分比是相对盒子的宽度计算的。例如在宽度为768px的设备下,padding-bttom的值就是768px乘以31.25%。375px的宽度下,就是375px乘以31.25%。即撑开的高度永远是根据宽度的变化而计算,不同设备下,盒子的宽高就相同了。

而盒子中的图片,假如太大,就会溢出。这里老师把图片设置高度大一些,让同学感受一下:

http://img1.sycdn.imooc.com//climg/5ec6209b098ba9c406450294.jpg

所以此时需要设置overflow:hidden,把溢出的部分隐藏掉,这样只显示在盒子区域的图片。

3.另外,后端是不会规定图片的宽高的,图片都是ui设计师处理的。后端只是把图片通过接口提供给前端。一般情况下,设计师给的图片尺寸都是相同的,可能不会出现上述情况。但设置一下overflow:hidden,也可以避免一些异常的情况(如后端的问题,提供的图片不对)。这里不用纠结,如果说图片的比例影响不大,设置固定高度也可以。等实际开发中,根据实际情况和公司的需求去选择如何去做哦。

祝学习愉快~

好帮手慕夭夭 2020-05-21 09:46:30

同学你好,overflow:hidden作用是超出隐藏,也就是说,假如有内容超出了盒子,就会把超出的内容隐藏。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

  • 提问者 lcyjerry #1
    老师说的那种按比例显示图片的方法,为什么不能直接给height的高度,后端传来的图片不都是给定宽高的吗?
    2020-05-21 10:53:27
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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