设置图片纵横比

如果你正在思考如何根据容器的宽度 按比例 设置高度，那么这个应该可以帮到你。

最近遇到一个响应式设计的需求，页面缩放时保持整体结构不变，按原有比例缩放，如下图：每行展示4个图片。

这个需求看似简单，其实呢，也确实很简单... 开始写代码

<template>
  <div>
    <el-row :gutter="12" class="y_gap00">
      <el-col v-for="(item, index) in cate_list" :key="index" :span="6" class="y_gap00 pointer">
        <div>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <img :src="item.cover_url" class="image_tag">
            <div style="padding: 14px; text-align: left">
              <span class="nice_title">{{item.title}}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ratio",
  data() {
    return {
      cate_list: [
        {title: '组织创新大课', cover_url: 'https://static.cyjiaomu.com/delivery/zzcx.png'},
        {title: '全媒体营销增长七剑特训营', cover_url: 'https://static.cyjiaomu.com/delivery/zzqj.png'},
        {title: '兵头将尾销售主管实战训练营', cover_url: 'https://static.cyjiaomu.com/delivery/btjw.png'},
        {title: '企业流量增长实战课', cover_url: 'https://static.cyjiaomu.com/delivery/llzc.jpg'},
        {title: '企业品牌营销实战课', cover_url: 'https://static.cyjiaomu.com/delivery/ppyx.jpg'},
        {title: '业务型HR实训营', cover_url: 'https://static.cyjiaomu.com/delivery/yewu.png'},
      ]
    }
  },
}
</script>

<style scoped>
.y_gap00 {
  margin: 15px 0 0 0!important;
}
.nice_title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow:hidden;
  width: 100%;
  display: inline-block;
}
.image_tag {
  width: 100%;
}
.image {
  width: 100%;
  display: block;
  padding-top: 60%;
  background-repeat: no-repeat;
  background-size: cover;
}
.pointer {
  cursor: pointer;
}
</style>

代码看似天衣无缝（当时了解需求的时候听说可能后续要增加课程，那我只要维护cate_list就可以了，随便你增加^_^）。

理想丰满，现实骨感 测试的时候发现，上边的代码在浏览器中表现的竟然是下面的样子！！！

为什么参差不齐？原因就在于需求方提供的图片尺寸并不是相同的！！！。

好吧，怎么让它们看起来相同？1. 图片设置固定高度（不可行，缩放之后就变形了）；2. 图片设置固定宽高比（可行，这样缩放后也能保持统一）

那么问题来了，本来宽度就是不固定的，怎样按比例设置高度呢？这就是下面讲到的 纵横比(aspect ratio)。

替换掉img标签

<template>
  <div>
    <el-row :gutter="12" class="y_gap00">
      <el-col v-for="(item, index) in cate_list" :key="index" :span="6" class="y_gap00 pointer">
        <div>
          <el-card shadow="hover" :body-style="{ padding: '0px' }">
            <!--
            <img :src="item.cover_url" class="image">
            -->
            <div class="image" :style="{backgroundImage: `url(${item.cover_url})`}"></div>
            <div style="padding: 14px; text-align: left">
              <span class="nice_title">{{item.title}}</span>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "ratio",
  data() {
    return {
      cate_list: [
        {title: '组织创新大课', cover_url: 'https://static.cyjiaomu.com/delivery/zzcx.png'},
        {title: '全媒体营销增长七剑特训营', cover_url: 'https://static.cyjiaomu.com/delivery/zzqj.png'},
        {title: '兵头将尾销售主管实战训练营', cover_url: 'https://static.cyjiaomu.com/delivery/btjw.png'},
        {title: '企业流量增长实战课', cover_url: 'https://static.cyjiaomu.com/delivery/llzc.jpg'},
        {title: '企业品牌营销实战课', cover_url: 'https://static.cyjiaomu.com/delivery/ppyx.jpg'},
        {title: '业务型HR实训营', cover_url: 'https://static.cyjiaomu.com/delivery/yewu.png'},
      ]
    }
  },
}
</script>

<style scoped>
.y_gap00 {
  margin: 15px 0 0 0!important;
}
.nice_title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow:hidden;
  width: 100%;
  display: inline-block;
}
.image_tag {
  width: 100%;
}
.image {
  width: 100%;
  display: block;
  padding-top: 60%;
  background-repeat: no-repeat;
  background-size: cover;
}
.pointer {
  cursor: pointer;
}
</style>

把之前的img标签改为div，来给div设置背景图。因为这个固定纵横比是借助div padding-top 实现的。

给 div.image 设置了 padding-top: 60%; 这样它的宽高比就是5:3，页面缩放保持不变。 就是文章最上边的那张图的效果（当然每一个图片的大小相差不能太离谱哈）。

在线演示地址

总结

div 的 padding-top 在响应式设计时可以实现固定宽高比的效果，如 padding-top: 60%; 这样它的宽高比就是5:3。如果你正在思考如何根据容器的宽度按比例设置高度，那么这个应该可以帮到你。

续(终极解决方法)

上边的设置 div padding-top 是比较hack的方式。后来发现一个更加直接的方法，那就是直接设置img的 aspect-ratio: 5 / 3;

.image_tag {
  width: 100%;
  aspect-ratio: 5 / 3;
}

这样就可以实现相同的效果。

各浏览器的支持情况如下

文章首发于 IICOOM-个人博客 《设置图片纵横比》