如果你正在思考如何根據容器的寬度 按比例 設置高度，那么這個應該可以幫到你。

最近遇到一個響應式設計的需求，頁面縮放時保持整體結構不變，按原有比例縮放，如下圖：每行展示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-個人博客 《設置圖片縱橫比》

總結

以上是生活随笔為你收集整理的设置图片纵横比的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。