当前位置：首页 > article >正文

移动端设置固定比例的盒子，让图片铺满盒子，并设置默认图片

article 2025/6/28 17:17:31

需求：
因为后端传过来的照片比例是不固定的，所以前端得固定一个统一的比例。
又因为是在移动端所以图片盒子还得适配移动端。
再者因为图片比较多，所以给一个默认图片可以优化用户的体验。
1.固定比例的盒子
2.盒子适配移动端
3.图片铺满盒子
4.默认图片

1.固定比例的盒子&盒子适配移动端

现在需要将一个盒子的尺寸定义为固定比例，且尺寸需根据视图的尺寸来进行缩放，也就是响应式。

有多种方法可以实现这个效果，下面逐一介绍。

1.1 垂直方向的padding

给padding的值设定为百分比时，将根据父容器的宽度来计算。

现在假设我们有一个div，我们希望它的尺寸能根据body（它的父容器）的宽度来实现固定比例：

<div class="box"></div>

样式部分

.box{width:50%;padding-bottom:50%;/*padding-top也可以*/
}

但是我们使用这种方法的时候需要注意几点：

1.不需要设定height，最好就是手动设定为0。
2.子元素需要设定为绝对定位（父容器为相对定位），否则子元素将被padding挤出去。

其它比例
前面实现的是一个正方形比例的，那如果我想要是16:9的呢？
那我们将根据一个公式：width * x / y计算，如下：

.box{width:50%;padding-bottom: calc( 50% * 9 / 16 );/* 或者 */padding-bottom : 28.125%;
}

1.2 视窗单位

视窗是你的浏览器实际显示内容的区域——换句话说是你的不包括工具栏和按钮的网页浏览器。这些单位是vw,vh,vmin和vmax。它们都代表了浏览器（视窗）尺寸的比例和窗口大小调整产生的规模改变。

也就是说，网页的宽度是100vw，取一半就是50vw，无论怎么缩放都是一半，而且这个一半不止可以用在width上。

所以：

<div class="box"></div>
.box{width:50vw;height:50vw;
}

一个正方形就出来了~
其它比例
跟上面一样，通过公式可以得到：

.box{width:50vw;padding-bottom: calc( 50vw * 9 / 16 );/* 或者 */padding-bottom : 28.125vw;
}

2.图片铺满盒子

盒子相对定位，图片绝对定位，宽度100%，就能铺满啦~

  <div class="box"><img src="./img/img.jpg" alt=""></div>

.box{width: 50%;padding-bottom: calc( 50% * 5 / 4 );background-color: coral;position: relative;
}
img{width: 100%;position: absolute;height: 100%;top: 0;left: 0;
}

3.默认图片

给盒子加上背景图片就能搞定！

background:url(./img/default.png) no-repeat center;

完整：

  <div class="box"><img src="./img/img.jpg" alt=""></div>

.box{width: 50%;padding-bottom: calc( 50% * 5 / 4 );background:url(./img/default.png) no-repeat center;position: relative;
}
img{width: 100%;position: absolute;height: 100%;top: 0;left: 0;
}