fix: make sizing "cover"

`preserveAspectRatio="xMidYMid slice"`
muxinc · May 31, 2024 · de3b8be · de3b8be
1 parent 87a66d4
commit de3b8be
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/blurup.js b/blurup.js
@@ -88,7 +88,7 @@ export async function createBlurUp(playbackId, options) {
 }
 
 function svgBlurImage(tinyImageDataURL, width, height, stdDeviation) {
-  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="${stdDeviation}"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" href="${tinyImageDataURL}"/></g></svg>`;
+  const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="${stdDeviation}"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" preserveAspectRatio="xMidYMid slice" href="${tinyImageDataURL}"/></g></svg>`;
   return svg.replace(/#/g, '%23');
 }
 

diff --git a/index.html b/index.html
@@ -196,11 +196,11 @@
       #blurup-code {
         display: block;
         font-family: 'JetBrains Mono', monospace;
-        font-size: .8rem;
+        font-size: .75rem;
         border-radius: 0;
         background: #FAFAF9;
         width: 100%;
-        height: 13rem;
+        height: 12.5rem;
         margin-top: 1rem;
         padding: .5rem .7rem;
       }