padding-top实现列表图片自适应

转自：巧用margin/padding的百分比值实现高度自适应

设置容器的padding-bottom/top

处理列表中响应式图片的时候，宽度可以设置百分比进行自适应， 

但是高度没办法控制 ，如果图片宽高不一致，宽度设置一样，高度会参差不齐

这时就可以使用padding来控制图片的高度，让列表中的图片强制设置同一高度

 div的宽度是相对父级100%，想设置div的显示宽度，只能设置父级的宽度，而不能设置自身的宽度

1 : 图片使用盒子包裹，案例为  .img-box

2 : img-box的高度用padding-top/padding-bottom 撑开

     padding-top的值是   （图片高 / 图片宽 * 100%）

     并设置为绝对定位  position : releteve

3 : 图片设置相对定位 position : absolute

     并宽高为 100%

.img-box {
      width: 100%;
      /* 596*586*100% */
      padding-bottom: 101%;
    }
 
.img-box img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
<div class="img-box">
  <!-- 图片宽度  132 * 234 -->
  <img src="./images/bird.png" alt="">
</div>

 

第二种方法；涉及到max-height的使用，使用伪元素撑开容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{width: 50%;background: #f0a099;display: inline-block;
            overflow: hidden;/*需要出发BFC消除margin折叠的问题*/
        }
        .box-i:after{
            content: '';
            display: block;
            margin-top: 100%;/*margin百分比相对于父元素的宽度计算*/
        }
        img{
            position: absolute;;top: 0;width: 100%;height: 100%;
        }
    </style>
</head>
<body>
<!--另外，使用margin的话需要考虑margin折叠的问题,padding没有此烦恼-->
<div class="box-i" id="box"></div>
</body>
</html>

 

posted @ 2020-12-23 12:05  moppet蔡蔡  阅读(300)  评论(0)  编辑  收藏  举报