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

发布于:2021-12-04 21:41:18

原文出处: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代码如下






  • 相关推荐

  • 最新更新

    猜你喜欢