html移动端正方形图片,【移动端布局】让图片保持等比例缩放【原创】

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

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了

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

放大分辨率再看：

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

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/20556.html

微信打赏

支付宝打赏

感谢您对作者Liam的打赏，我们会更加努力！    如果您想成为作者，请点我