img图片宽度自适应做到正方形展示

1)前言

许多时候前端展示图片宽度可能是随着父级元素的宽度来定的，也就是width 100%，那么怎么高度怎么设计呢

例如

image.png

我们要做到这种布局，蓝色方块为li 考虑两个两个并排显示图片必须正方形展示考虑到屏幕的大小问题，li就不能是固定宽度了

<body>
  <ul>
    <li>
        <div class="img-wapper">
          <img src="****" />
        </div>
        <div class="text>详细说明</div>
    </li>
    <li>
        <div class="img-wapper">
          <img src="****" />
        </div>
        <div class="text>详细说明</div>
    </li><li>
        <div class="img-wapper">
          <img src="****" />
        </div>
        <div class="text>详细说明</div>
    </li><li>
        <div class="img-wapper">
          <img src="****" />
        </div>
        <div class="text>详细说明</div>
    </li>
...
  </ul>
</body>

//css代码
ul{
  display : flex;
  flex-wrap: wrap;
}
li{
  width: 50%;
  overflow: hidden;
}
.img-wapper{
 position: relative;
  padding-top: 100%; //重要的就是这个padding-top: 100%
}
img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

重点是img的容器需要定位并且padding-top： 100%；

最后编辑于：2018.06.04 18:11:36

img图片宽度自适应做到正方形展示

1)前言

推荐阅读更多精彩内容