【移动端布局】让图片保持等比例缩放（实用）

短命女 2022-04-17 03:39 670阅读 0赞

原文出处：[https://www.aliyun.com/jiaocheng/639739.html][https_www.aliyun.com_jiaocheng_639739.html]

摘要：

前端写页面布局时,图片变形是个很令人头疼的问题,手机屏幕分辨率不一样,出来的效果就不一样,下面的代码可以解决这些问题,保持图片在不同分辨率下面也可以让图片不变形

*  1、首先不能给外层列表定高度,用margin或者padding撑开.album-li-pic\{height:0;overflow:hidden;margin:0;padding-bottom:100%;\}
 *  2、img用定位的方式布局,width设置成为100%.album-li-picimg\{display:block;

1、首先不能给外层列表定高度,用margin或者padding撑开

.album-li-pic{
        height: 0;
        overflow: hidden;
        margin: 0;
        padding-bottom: 100%;
    }

2、img用定位的方式布局,width设置成为100%

.album-li-pic img{
        display: block;
        position: absolute;
        width: 100%;
        top: 0;
        bottom: 0;
    }

html代码如下

如果图片不是正方形的,可以调整padding-bottom来实现,比如图片要求4:3,那么padding-bottom就设置为75%就行了

原理:通过margin, padding 的百分比数值计算,(按照规定,margin, padding 的百分比数值是相对 父元素宽度 的宽度计算的),然后利用百分比数值的 padding-bottom 属性撑开容器内部空间,然后让img充满整个父级就OK了

用谷歌浏览器模拟手机效果如下:

![【移动端布局】让图片保持等比例缩放【原创】\_HTML/CSS][HTML_CSS]

放大分辨率再看:

![【移动端布局】让图片保持等比例缩放【原创】\_HTML/CSS][HTML_CSS 1]

这样就达到我们预期的效果了,在不同分辨率下图片始终不会变形

[https_www.aliyun.com_jiaocheng_639739.html]: https://www.aliyun.com/jiaocheng/639739.html
[HTML_CSS]: /images/20220417/41e23c593f2648f48db47d5553cc1e97.png
[HTML_CSS 1]: /images/20220417/b2ee09b82de041ec8dc2fe545a70297a.png