css3 --- 圖片高度自適應

在展現上傳圖片的時候，常常會碰見圖片不是正方形，直接設置overflow：hidden的話，會遮擋圖片。

 

HTML部分

<div class="adaptive-img">
    <img src="僞裝有圖片資源" />    
</div>

 

CSS部分

.adaptive-thumb-img { width: 48px; height: 48px; text-align: center;
} img { width: auto; height: auto; max-width: 100%; max-height: 100%;              
}

 

是的！！就是這麼簡單，圖片就能夠自適應啦

　　　　　　　　　　　　　　　　　　　　　　　原效果                                                                                                                                                                   現效果