当前位置：首页 > news >正文

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

news 2025/6/24 16:59:51

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 🍎 张浩雨: img.onload -> element.style.backgroundSize ', 'font-size:16px;background-color:#ea00ea;color:white;', element.style.backgroundSize)};
}
const imageHeightOnChange = (element) => { //todo 背景图片容器高度变化时，自动计算背景图片的高度// 创建一个观察者对象const observer = new MutationObserver((mutationsList, observe) => {for(let mutation of mutationsList) {if (mutation.attributeName === 'style') {const style = mutation.target.getAttribute('style');if (style.includes('height')) {setBackgroundImageHeight(element)}}}});// 传入目标节点和观察目标节点的属性变动observer.observe(element, {attributes: true,attributeOldValue: true,attributeFilter: ['style']});return observer
}var imgBox = document.getElementById('img_box');
imageHeightOnChange(imgBox)

案例讲解

1、初始化时的默认宽高；
在这里插入图片描述
2、背景图片的宽高；

3、执行上面的代码，并执行imgBox.setAttribute(‘style’, ‘height: 380px’)，此时高度小于图片的宽高比计算出来的高度，图片高度被裁减；

4、执行imgBox.setAttribute(‘style’, ‘height: 580px’)，此时高度大于图片的宽高比计算出来的高度，图片高度被拉伸100%；