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%;              
}

 

是的！！就是這么簡單，圖片就可以自適應啦

　　　　　　　　　　　　　　　　　　　　　　　原效果                                                                                                                                                                   現效果