老师，图片高度问题这里我有疑问
来源：2-3 利用CSS技巧实现搜索及 banner 区域布局
墨莫
2021-04-29 18:42:38
在这个banner里面，图片的高度，我可以在写css的时候直接设置好固定高度吗？比如我测量的图片高度是86px 我就直接设置
height:.86rem
不是一样可以把区域撑起来吗
height: 0;
overflow: hidden;
padding-bottom: 25.4%;
老师这样的写法，是在日常开发中更常用的方法吗？我的那种简单的写法，是会有什么局限性吗？还是针对具体情况具体分析？
写回答
1回答
-
同学你好，解答如下：
1、我们这里除了想把banner撑起来之外，还想让banner的高度与图片一致。由于图片的宽度是自适应的，在不同的机型下，图片宽度不固定，而图片的高度会按照宽度自动计算，所以图片的高度也不固定。如果把banner设置成固定的0.86rem，由于html的font-size始终是100px，那么banner的高度就不会变，就会出现banner与图片不一样高的情况（局限性）：
所以这里老师采用了padding-bottom: 25.4%;的形式，这样可以保证banner的高与图片高始终一致。
2、老师这种方案很常用，同学可以当成技巧记忆一下。
另外，如果这两种方式都能实现需求，那么就采用同学写的那种简单的方式即可。
祝学习愉快！
0
相似问题