improved image grouping and canvas replacement implementations

lib/single-file/single-file-core.js

@@ -604,7 +604,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				this.doc.querySelectorAll("canvas").forEach((canvasElement, indexCanvasElement) => {
 					const canvasData = this.options.canvasData[indexCanvasElement];
 					if (canvasData) {
-						DomProcessorHelper.setBackgroundImage(canvasElement, { url: "url(" + canvasData.dataURI + ")", width: canvasData.width, height: canvasData.height });
+						DomProcessorHelper.setBackgroundImage(canvasElement, "url(" + canvasData.dataURI + ")");
 						this.stats.add("processed", "canvas", 1);
 					}
 				});
@@ -898,20 +898,13 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			return filename;
 		}
 
-		static setBackgroundImage(element, imageData) {
+		static setBackgroundImage(element, url) {
 			element.style.setProperty("background-blend-mode", "normal");
-			element.style.setProperty("background-clip", "border-box");
-			element.style.setProperty("background-position", "0%");
+			element.style.setProperty("background-clip", "content-box");
+			element.style.setProperty("background-position", "center");
 			element.style.setProperty("background-color", "transparent", "important");
-			element.style.setProperty("background-image", imageData.url, "important");
-			let width = imageData.width, height = imageData.height;
-			if (!imageData.width) {
-				width = "100%";
-			}
-			if (!imageData.height) {
-				height = "auto";
-			}
-			element.style.setProperty("background-size", `${width} ${height}`, "important");
+			element.style.setProperty("background-image", url, "important");
+			element.style.setProperty("background-size", "contain", "important");
 			element.style.setProperty("background-origin", "content-box", "important");
 			element.style.setProperty("background-repeat", "no-repeat", "important");
 		}
@@ -1327,7 +1320,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			if (imgElement.getAttribute(dataAttributeName) != null) {
 				const imgData = options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
 				imgElement.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${imgData.pxWidth}" height="${imgData.pxHeight}"><rect fill-opacity="0"/></svg>`);
-				DomProcessorHelper.setBackgroundImage(imgElement, { url: "var(" + variableName + ")", width: imgData.width, height: imgData.height });
+				DomProcessorHelper.setBackgroundImage(imgElement, "var(" + variableName + ")");
 				imgElement.removeAttribute(dataAttributeName);
 				return true;
 			}