fixed images display on smaller screens

[theme-danix.xyz.git] / layouts / shortcodes / img.html

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index d4159be..9f537cf 100644 (file)
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -14,7 +14,7 @@
     for that, and then fade in for the LQIP effect.
     Feel free to adjust your CSS/SCSS as desired.
 */}}
-{{- $imgClass := "w-full h-auto animate-fade" -}}
+{{- $imgClass := "animate-fade" -}}
 {{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}}
 {{/*
     Now we'll create the 20-pixel-wide LQIP
@@ -27,7 +27,7 @@
     $CFPstyle is for use in styling
     the div's background, as you'll see shortly.
 */}}
-{{- $CFPstyle := printf "%s%s%s%v%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px; height: " $source.Height "px;" -}}
+{{- $CFPstyle := printf "%s%s%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px;" -}}
 {{/*
     Then, we create a 640-pixel-wide JPG
     of the image. This will serve as the
@@ -74,7 +74,8 @@
             />
             <img class="{{ $imgClass }}"
                 src="{{ $actualImg.RelPermalink }}"
-                width="640"
+                width="{{ $source.Width }}"
+                height="{{ $source.Height }}" 
                 alt="{{ $alt }}"
                 loading="lazy"
             />