在多(duō)年的(de)上海網頁制作的(de)項目過程中，如果産品圖片寬高(gāo)定死的(de)話(huà)，有的(de)圖片就會變形，如果把寬給個(gè)最大(dà)寬，高(gāo)自适應的(de)話(huà)有的(de)圖又會由于是個(gè)長(cháng)方形高(gāo)超出了(le)容器，這(zhè)樣就不得(de)不截掉一部分(fēn)圖。于是就想著(zhe)，首先不管圖片是個(gè)什(shén)麽比例，不管它是寬遠(yuǎn)大(dà)于高(gāo)或者高(gāo)遠(yuǎn)大(dà)于寬，統一設置最大(dà)的(de)寬高(gāo)值，不讓它超出容器，并且這(zhè)樣處理(lǐ)圖片不會變形。接下(xià)來(lái)想怎麽處理(lǐ)圖片大(dà)小不定，在固定容器中水(shuǐ)平垂直居中的(de)問題。
1.推薦使用(yòng)方法（利用(yòng)font-size:0與空白标簽）
<div class="imgMid-a">
<ul>
<li><a href="#"><span></span><img src="static/picture/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="hstatic/picture/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="static/picture/20160521153134264.jpg"></a></li>
</ul>
</div>
.imgMid-a{width: 700px;height: 200px;margin:50px auto;}
.imgMid-a ul{width: 750px;}
.imgMid-a li{float: left;width:200px;height:200px;margin-right: 50px;text-align: center;font-size: 0;}
.imgMid-a li a{display: block;width: 198px;height: 198px;border: 1px solid #ccc;}
.imgMid-a li a:hover{border: 1px solid #f00;}
.imgMid-a li span{display: inline-block;width: 1px;height: 100%;vertical-align:middle;}
.imgMid-a li img{vertical-align: middle;max-width:178px;max-height:178px;}
2.建議(yì)掌握技巧。利用(yòng)display:table-cell與display:inline
<div class="imgMid-a">
<ul>
<li><a href="#"><span></span><img src="static/picture/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="hstatic/picture/20160521153134264.jpg"></a></li>
<li><a href="#"><span></span><img src="static/picture/20160521153134264.jpg"></a></li>
</ul>
</div>
.imgMid-b{width: 700px;height: 200px;margin:50px auto;}
.imgMid-b ul{width: 750px;}
.imgMid-b li{float: left;margin-right: 50px;}
.imgMid-b li a{width: 198px;height: 198px;border: 1px solid #000;display: table-cell;text-align: center;vertical-align: middle;}
.imgMid-b li a:hover{border: 1px solid #f00;}
.imgMid-b li img{vertical-align: middle;max-width: 178px;max-height: 178px;}
<!--[if lt IE 8]>
<style type="text/css">
.imgMid-b{height: 0;zoom:1;}
.imgMid-b a{display: block;}
.imgMid-b span{display: inline-block;vertical-align: middle;height: 100%;}
</style>
<![endif]-->
也(yě)許這(zhè)種方法較第一種更爲繁瑣，還(hái)得(de)寫兼容ie的(de)hack，但是我覺得(de)用(yòng)display-table和(hé)vertical-middle在現代浏覽器中實現圖片垂直居中是很值得(de)學習(xí)的(de)。如果以後不需要做(zuò)低端浏覽器的(de)兼容了(le)，這(zhè)種方法應該會更适合我。
