padding-bottom实现图片自适应

时间：2023-03-30 23:48:51 CSS

1.需求场景比如我们在实现移动banner轮播的时候，需要轮播图片填充我们的轮播区域，通常我们的做法是给banner设置一个固定的宽高,然后超过它Hidden,imgsetmax-width:100%;虽然这样可以填满轮播区域，但是我们会发现虽然宽度自适应但是高度不自适应，而且有时候我们会发现竖图的底部不见了，因为如果图片太高，当宽度图片的100%自适应，高度也会根据宽度的自适应比例进行自适应（缩小或放大）。此时高度超过banner区域被隐藏，会导致图片在视觉上丢失。感觉。那我们怎么解决呢？看代码

.banner{width:700px;高度：700px；边框：1px实心#000；边距：0自动；}.cell{宽度：100%；高度：0；底边距：31.25%；溢出：隐藏；background:red;}img{width:100%;}为什么padding-bottom的值为31.25%，因为图片的高度是200px，宽度是640px。200/640为31.25%。单元格的padding-bottom支持单元格的高度，这个百分比的值是相对于单元格宽度的百分比，而不是父容器banner高度的百分比。至此我们就解决了图像适配的问题。其实我们还有另一种写法，如下：.banner{width:700px;高度：700px；边框：1px实心#000；边距：0自动；}.cell{宽度：100%；身高：31.25vw；溢出：隐藏；背景：红色；}img{宽度：100%；}