当前位置 : 主页 > 网页制作 > css >

css3 --- 图片高度自适应

来源:互联网 收集:自由互联 发布时间:2021-06-13
在展示上传图片的时候,经常会遇见图片不是正方形,直接设置overflow:hidden的话,会遮挡图片。 HTML部分 div class ="adaptive-img" img src ="假装有图片资源" / / div CSS部分 .adaptive-thumb-img { w

在展示上传图片的时候,经常会遇见图片不是正方形,直接设置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%;              
}

 

是的!!就是这么简单,图片就可以自适应啦

                       原效果                                                                                                                                                                   现效果

    

网友评论