fix:web stretching insets when original image exceeds img dimensions

doric-web/dist/index.js

@@ -7441,6 +7441,15 @@ var doric_web = (function (exports, axios, sandbox) {
 	        this.loadPlaceHolder(targetElement);
 	        let tempLoadElement = this.stretchInset ? document.createElement('img') : targetElement;
 	        tempLoadElement.onload = () => {
+	            if (this.stretchInset) {
+	                if (!this.resizeObserver) {
+	                    this.resizeObserver = new ResizeObserver(entry => {
+	                        this.onResize.call(this, { width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
+	                    });
+	                    this.resizeObserver.observe(targetElement);
+	                }
+	                this.onResize({ width: tempLoadElement.naturalWidth, height: tempLoadElement.naturalHeight });
+	            }
 	            //remove placeHolderColor
 	            targetElement.style.removeProperty('background-color');
 	            if (tempLoadElement.src === src && this.onloadFuncId) {
@@ -7475,11 +7484,16 @@ var doric_web = (function (exports, axios, sandbox) {
 	        v.src = transparentBase64;
 	        v.style.borderImageSource = `url(${src})`;
 	        v.style.borderImageSlice = `${stretchInset.top} ${stretchInset.right} ${stretchInset.bottom} ${stretchInset.left} fill`;
-	        const top = toPixelString(stretchInset.top);
-	        const right = toPixelString(stretchInset.right);
-	        const bottom = toPixelString(stretchInset.bottom);
-	        const left = toPixelString(stretchInset.left);
-	        v.style.borderImageWidth = `${top} ${right} ${bottom} ${left}`;
+	    }
+	    calculateStretchBorderWidth(originalSize, targetSize, stretchInset) {
+	        const widthRatio = targetSize.width / originalSize.width;
+	        const heightRatio = targetSize.height / originalSize.height;
+	        const scaleFactor = Math.min(widthRatio, heightRatio);
+	        const scaledStretchInset = {};
+	        for (const key in stretchInset) {
+	            scaledStretchInset[key] = Math.round(stretchInset[key] * scaleFactor);
+	        }
+	        return scaledStretchInset;
 	    }
 	    loadPlaceHolder(v) {
 	        if (this.placeHolderImage) {
@@ -7522,6 +7536,19 @@ var doric_web = (function (exports, axios, sandbox) {
 	        }
 	        return null;
 	    }
+	    onResize(originalSize) {
+	        if (!this.stretchInset) {
+	            return;
+	        }
+	        if (this.view.offsetWidth !== 0 || this.view.offsetHeight !== 0) {
+	            const scaledStretchInset = this.calculateStretchBorderWidth({ width: originalSize.width, height: originalSize.height }, { width: this.view.offsetWidth, height: this.view.offsetHeight }, this.stretchInset);
+	            const top = toPixelString(scaledStretchInset.top);
+	            const right = toPixelString(scaledStretchInset.right);
+	            const bottom = toPixelString(scaledStretchInset.bottom);
+	            const left = toPixelString(scaledStretchInset.left);
+	            this.view.style.borderImageWidth = `${top} ${right} ${bottom} ${left}`;
+	        }
+	    }
 	}
 
 	class DoricScrollerNode extends DoricSuperNode {