經過padding-top加載圖片的時候高度不塌陷

實現的基本原理：將使用到保持元素的寬高比的技巧，爲元素加垂直方向padding-top值，使用百分比的形似，這個是相對於元素的寬高而定的，好比，一張圖片的寬度爲474px，高度爲355.5px,那麼如今的

padding-top = (高度/寬度)*100%=（474/355.5）*100%=75%

 CSS樣式

.box {width: 1200px;margin:0 auto;}
.box ul{overflow: hidden;margin:0 -1%;}
.box ul li{float: left;width: 31%;margin: 0 1%;}
.box ul li .pic{display: block;width: 100%; height: 0;overflow: hidden;position: relative;padding-top: 75%;}
.box ul li .pic img{display: block; position: absolute;top: 0; left: 0;width: 100%; height: 100%;}

.box ul li h3{font-size: 24px;text-align: center;height: 54px;line-height: 54px;}

HMLT結構

<div class="box">
    <ul>
      <li>
        <a href="" class="pic"><img src="images/cp-por1.jpg" alt="移動式破碎機"></a>
        <h3><a href="">移動式破碎機</a></h3>
      </li>
      <li>
        <a href="" class="pic"><img src="images/cp-por2.jpg" alt="顎式破碎機"></a>
        <h3><a href="">顎式破碎機</a></h3>
      </li>
      <li>
        <a href="" class="pic"><img src="images/cp-por3.jpg" alt="圓錐破碎機"></a>
        <h3><a href="">圓錐破碎機</a></h3>
      </li>
       <li>
        <a href="" class="pic"><img src="images/cp-por1.jpg" alt="移動式破碎機"></a>
        <h3><a href="">移動式破碎機</a></h3>
      </li>
      <li>
        <a href="" class="pic"><img src="images/cp-por2.jpg" alt="顎式破碎機"></a>
        <h3><a href="">顎式破碎機</a></h3>
      </li>
      <li>
        <a href="" class="pic"><img src="images/cp-por3.jpg" alt="圓錐破碎機"></a>
        <h3><a href="">圓錐破碎機</a></h3>
      </li>
    </ul>
  </div>