【移动端布局】让图片保持等比例缩放 (实用) |
您所在的位置:网站首页 › 手机打印怎么放大图片比例 › 【移动端布局】让图片保持等比例缩放 (实用) |
原文出处: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了 用谷歌浏览器模拟手机效果如下:
放大分辨率再看: 这样就达到我们预期的效果了,在不同分辨率下图片始终不会变形 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |