el轮播图片image单张图比例缩放及多张图宽度固定高度等比例自适应展示；

开发过程中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-else
                             class="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: "https://www.baidu.com/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♪(･ω･)ﾉ！！！！！！！！！！！！！