像微信朋友圈一样，添加图片的时候，等比例正方形显示在列表中，如何让图片根据宽高来自适应显示在页面上呢？示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=device-dpi" /> <style type="text/css">.figure-list{margin: 0;padding: 0;}.figure-list:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}.figure-list li{list-style: none;float: left;width: 23.5%;margin: 0 2% 2% 0;}.figure-list figure{border: 1px solid #000;position: relative;width: 100%;height: 0;overflow: hidden;margin: 0;padding-bottom: 100%; /* 关键就在这里 */background-position: center;background-repeat: no-repeat;background-size: cover;}.figure-list figure a{display: block;position: absolute;width: 100%;top: 0;bottom: 0;}</style><ul class="figure-list"><li><figure style="background-image:url(1.png)"><a href="#"></a></figure></li><li><figure style="background-image:url(2.png)"><a href="#"></a></figure></li><li><figure style="background-image:url(3.png)"><a href="#"></a></figure></li><li><figure style="background-image:url(4.png)"><a href="#"></a></figure></li><li><figure style="background-image:url(5.png)"><a href="#"></a></figure></li><li><figure style="background-image:url(6.png)"><a href="#"></a></figure></li></ul></html>
如果觉得《CSS——实现图片等比例正方形显示 宫格排列》对你有帮助，请点赞、收藏，并留下你的观点哦！
