图片高宽比和图片位置的问题
来源：2-3 利用CSS技巧实现搜索及 banner 区域布局
慕勒8540250
2023-11-28 21:10:41
.banner {
height: 0;
overflow: hidden;
padding-bottom: 25.4%;
&__img {
width: 100%;
}
}
- 为什么要把padding-bottom设置成高宽比？直接设置成图片的高度不行吗？
- 有了padding-bottom之后图片为什么没有被挤下去显示，反而重叠在了padding-bottom上？
- 还有不明白为什么要将父容器banner的height设置成0？
1回答
-
同学你好，解答如下：
1、图片有固定的宽高比，当图片的实际宽高，保持该比例的时候，图片就正常显示，否则图片上的内容会被拉伸或者压缩（图片变形了）。
比如图片固定宽高比是2:1，图片初始大小是200px*100px的，此时图片是正常的。当我们将图片宽高设置成100px*50px的时候，由于宽高比还是2:1，此时图片效果还是正常的，不会压缩和拉伸。但是一旦设置成其他比例的，比如设置成了102px*30px，此时图片肯定会变形。
移动端，页面宽度并不固定，而图片宽度此时设置成了100%，即和页面宽度一致。如果将图片高度设置成固定值，那么就会发生图片变形的现象。比如A手机，页面宽度是200px，B手机页面宽度是180px，如果都将图片高度设置成100px（图片宽高比是2:1），那么图片在A上，宽高比是2:1，效果正常。但是在B上，宽高比不是2:1，就变形了。
2、css中的一些样式现象，同学知道就行了。
比如，即使div高度是0，默认情况下，div中的内容也可以显示：
再比如，padding-top会把内容往下挤：
而padding-bottom，不会挤压上面的内容，而是会向下挤压，从而把盒子撑大。即paddding-bottom对上面的内容没影响：
图片也是一样的，这些显示效果同学注意一下就行，css自身的显示问题。
3、从第2点可知，padding-bottom可以撑大盒子的高度。如果div的height是0，只设置了padding-bottom，
那么div的高度就是padding-bottom的值。
代码中，设置height是0，就是让盒子的高度与padding-bottom一致。
而且，padding-bottom有个特殊点，当padding-bottom的值设置成百分比时，是相对于宽度来计算的。
比如div宽度是100px，div的padding-bottom如果设置成了50%，那么padding-bottom的实际值就是50px。利用该特性（技巧） ，可以让图片保持宽高比显示。
从第1点可知，图片的宽高比要保持固定不变，才能显示正常。那么，图片的 高度/宽度 也应该是固定值。假设图片宽高比是2:1，那么高宽比就是1:2。
如果div.banner的高度就是padding-bottom，并且padding-bottom是50%，那么div.banner的 高度/宽度 就等于1:2，图片宽度是和div一样的，那么图片的高度就和div是一样的。即图片此时高宽比例是固定的，是1:2，这样图片就始终是正常显示的，并且包裹图片的盒子div.banner，宽高和图片一致，二者一样大。
祝学习愉快！
0
相似问题