开发过程中xx产品强烈需要轮播图的布局不固定， 单张 等比例缩放展示，多张图取最高高度自适应展示；通过修改图片img 父级盒子容器宽高固定图片高度；
单张：1、方图 （宽高比例 ± 15% ） 2 、非方图 等比例展示；
多图：得到图最大高的宽根据此宽 375 / w 缩放比例获取等比例最大高
1 html及css结构: css 需要用的object-fit： cover; 属性 等比例裁剪图片；
<el-carousel width="375px":height="`${maxHeight}px`"class="s-content"arrow="never"><el-carousel-item v-for="(item, inx) in product_config_list":key="inx"><img fit="cover":src="item.image"v-if="item.image"class="s-img"radius="10" /><!-- 占位空白 --><div v-elseclass="s-img"></div></el-carousel-item></el-carousel>// css: 图片wh 100%.s-img {width: 100%;height: 100%;overflow: hidden;object-fit: cover;display: block;background-color: #ffffff;}
2 、图尺寸： 通过图片的路径url 获取每张图片的宽高如下：
// 获取图片高度 宽度/**** @params url 图片路径* @return height 返回图片宽高*/export const getImageWH = (url: any): any => {return new Promise((res: any) => {// 通过构造函数来创建的 img 实例，在赋予 src 值后就会立刻下载图片const Image: HTMLImageElement = new Image();Image.src = url;Image.crossOrigin = "*"; // 图片跨域Image.onload = function () {const returnWH = {height: Image.height,width: Image.width};// 返回图片高 款res(returnWH);};});};
3、通过已获取图片信息列表处理尺寸,通过过监听或者计算属性获取H：
import { getImageWH } from "/图宽高路径";// 自定义变量maxHeight = 375; // 直接赋值高 或者 通过方法返回赋值product_config_list = [{image: ", name: "美丽china"}, ] // 存放图列表 eg image: "/link?url=Wr8LV-k3sjXkVuk4F1wrYkIjqyKVg9meQj4gu9OuvTVAbsy5cOxQTrSckhgJzMQ1PDI60ynymKq8sDsapCvEAG7w5u5KSfzj6j7ONtvdi5U1JC1-uI6na_7qX4JYfQ-v_zJ5j2ZAaKIYa5iS34rpd0nM5SKhyUR9YE0r4uV5urQAowKRUz2mH5tMcWixuqUb8WV896QYvwNfiBX9z2jAGLlzdbxmBlJrKLjFzkWFsCgVD-vGRcSaQcbZ62HTR4_UVCRgRm9CqQCSE5kiMQf89dKd5S8LA7us6ucciIYyKPsczrE1lHWp-KzZ96Z9-oBwBIr7WoOr9htw-HtGyBa7VWa9FSaTW6bv4Rr9zm_yv5r7ZYbP0kP8oZTHgdWfHDzwnw9oSP1XvsOyrL-lXEk-wINpz_ZrIoYanCfQDbsbCXw4c_nPxm6zTH4K8ijgU2u7cW6pqkJlYLnTv9LCNiIRtUCg4x-DNh4vbF4gBPvSEJuPnIY8zTByYM7PzsFiZE_L4kYv_4DabDAGnzmPa3RYVX4XdE3qcAA8mLVyoQa2FT0-AMJ5KKfYH5TqISbcluyh1aItXr9GXQ2AVPbROzZMC8lTm_NTqrFa7f3sg8TBAgck5SmfFF7fhZHWq4FWaFgfjidsU7nOysAhYr0Rng_G5jAv3b7sHD7KKbMJc23XD3W&wd=&eqid=f379b56d001641df000000046412bb57"/*** 轮播图片尺寸处理获取图片最大高或者单个图片* @params originlist 轮播列表 最新* @params 375默认宽* @params image 图片键名 可自定义的key*/export const getMaxHegiht = async (originlist: Array<any>) => {let imgHeight = 0; // 图片高let heightArr: any[] = []; // 多图高收集let whArrlist: any[] = []; // 多图宽高收集let whObj: any = {width: 0, height: 0} ; // 单个图片wh /** 图高收集 */for (let value of originlist.values()) {whObj = await getImageWH(value.image);heightArr.push(whObj.height);// 宽whArrlist.push(whObj);}// 一、单张图高处理if (whObj && originlist && originlist.length == 1) {/*** 1、正方形图处理* eg: 宽高笔记误差在 ± 15% 范围图视为正方形图 宽高为 375px尺寸*/const whscale = whObj.width / whObj.height;if (whscale && whscale >= 0.85 && whscale <= 1.15) {this.maxHeight = 375;return 375;}/** 2 不满足方图处理尺寸 */let imgScale = 0; // 缩放比例imgScale = 375 / whObj.width;imgHeight = whObj.height * imgScale;this.maxHeight = imgHeight;return imgHeight;}/** 二、多张图片图高 *//** 1 筛选实际最大高度 */imgHeight = heightArr && Math.max(...heightArr);/*** 2 根据图片宽等比例计算高*/const maxHeightObj = whArrlist && whArrlist.find((ite: any) => ite.height == imgHeight);if (maxHeightObj && maxHeightObj.width > 0) {imgHeight = (375 / maxHeightObj.width) * imgHeight;}this.maxHeight = imgHeight;console.log("HHHHH----->", imgHeight);// 清空最高收集heightArr = [];return imgHeight;}// 通过过监听watch或者计算属性computed处理得到H，或者当获得获取图片列表数据时处理自适应高度eg： 监听1 watch： ----》product_config_list -----》H = this.getMaxHegiht(product_config_list)2 computed ---》 product_config_list -----》H = this.getMaxHegiht(product_config_list)
此方法根据需求所处理，如果更好方法和处理不同状态，敬请点拨 Thanks♪(･ω･)ﾉ！！！！！！！！！！！！！
