自定义一个背景图片的高度，随着容器高度的变化而变化，小于图片的高度时裁剪，大于时拉伸100%展示

1、通过js创建<image?>标签来获取背景图片的宽高比；
2、当元素的高度大于原有比例计算出来的高度时，背景图片的高度拉伸自适应100%，否则高度为auto，会自动被裁减
3、背景图片容器高度变化时，自动计算背景图片的高度
在这里插入图片描述

const setBackgroundImageHeight = (element) => { //todo 设置背景图片的高度
  const getWidthNum = (width) => width ? width.slice(0, -2) : width; //todo 手动截掉宽度的px后缀
  const img = new Image();
  const { height, width, backgroundImage } = getComputedStyle(element); //? 获取到该元素的宽高
  img.src = backgroundImage.replace(/^url\(["']?/, '').replace(/["']?\)$/, '');
  img.onload = function() {
    var aspectRatio = img.width / img.height; //? 获取该背景图片的宽高比
    const backgroundImageHeight = getWidthNum(height) > (getWidthNum(width)/aspectRatio) ? '100%' : 'auto'; //* 当元素的高度大于原有比例计算出来的高度时，背景图片的高度拉伸自适应100%
    element.style.backgroundSize = `100% ${backgroundImageHeight}`;
    console.log('%c 
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/790949