图片响应式制作

因为项目要响应式开发，所以图片大小不能写死了

直接写样式吧

.imgBox {
  position: relative;
}
.imgBox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

//默认图片宽高1:1根据自己用得多的来更改

.imgBox:before {
  content: "";
  display: block;
  padding-top: 100%;
}

//图片比例为2:1

.imgSize2_1:before {  padding-top: 50%; }

//图片比例为1:2

 .imgSize1_2:before { padding-top: 200%; }

//图片比例为4:3

 .imgSize4_3:before { padding-top: 75%; }

//图片比例为16:9

 .imgSize16_9:before { padding-top: 56.25%; }

<div class="imgBox imgSize1_2">
    <img src="" alt="" />
</div>

默认情况下图片宽高1:1

先预设一些常用的图片宽高

如果遇到特殊的比例就自己计算来给就好了

计算公式：

高（height） / 宽（width） = 比例（padding-top）

把这个比例直接拿来用就好了，保留两位小数点差不多了

当然还有通过不同高度使用不同的图片，这个还没有去做，后台太LOW，多的图片都在找不到地方去传，所以我不想搞了，拜拜~

搜索

复制