标签：abs absolute info span pre 完整 round head body
此主要是结局后台数据给的图片尺寸规格不统一的问题，不过也有缺点，如果图片的尺寸跟你要展示的尺寸差异过大，有可能看不到全图，只能看到中间的部分；
先看实现后的效果图
下面是完整的代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片在固定的宽高中不变形展示(访微信朋友圈图片展示)</title> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <style type="text/css"> .clearfix:after { display: block; content: ""; clear: both } .clearfix { zoom: 1 } .list-ul{ margin: 0; padding: 0; } .list-ul li{ list-style: none; float: left; width: 28%; margin: 2%; } .list-ul div{ border: 1px solid #000; position: relative; width: 100%; height: 0; overflow: hidden; margin: 0; padding-bottom: 60%; /* 关键就在这里 根据这个控制图片的高度,根据高和宽的比例计算得出要展示多高的图片*/ background-position: center; background-repeat: no-repeat; background-size: cover; } .list-ul div a{ display: block; position: absolute; width: 100%; top: 0; bottom: 0; } </style> </head> <body> <ul class="list-ul clearfix"> <li> <div style="background-image:url(images/img1.jpg)"> <a href="#"></a> </div> </li> <li> <div style="background-image:url(images/img2.jpg)"> <a href="#"></a> </div> </li> <li> <div style="background-image:url(images/img3.jpg)"> <a href="#"></a> </div> </li> <li> <div style="background-image:url(images/img2.jpg)"> <a href="#"></a> </div> </li> </ul> </body> </html>
标签：abs absolute info span pre 完整 round head body
原文地址：https://www.cnblogs.com/shanshanjiadexiaohai/p/11038084.html
