fixed images display inside a figure element, aka when not inside a gallery.

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 6052089..67f156c 100644 (file)
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -46,12 +46,16 @@
 \r
                &.fit {\r
                        display: block;\r
-                       margin: 0 0 _size(element-margin) 0;\r
-                       width: 100%;\r
+                       margin: 0 auto _size(element-margin);\r
+                       width: 90%;\r
 \r
                        img {\r
                                width: 100%;\r
                        }\r
+                       div.picture {\r
+                               max-width: 100%;\r
+                               height: auto;\r
+                       }\r
                }\r
 \r
                &.main {\r
@@ -61,6 +65,11 @@
 \r
                        img {\r
                                width: 100%;\r
+                               max-width: 100%;\r
+                       }\r
+                       div.picture {\r
+                               max-width: 100%;\r
+                               height: auto;\r
                        }\r
 \r
                        @include breakpoint('<=small') {\r
@@ -147,4 +156,8 @@
                                overflow: hidden;\r
                        }\r
                }\r
+       }\r
+\r
+       div.picture {\r
+               display: inline-block;\r
        }
\ No newline at end of file

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index d4159be..f5f29ca 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
@@ -74,7 +74,8 @@
             />
             <img class="{{ $imgClass }}"
                 src="{{ $actualImg.RelPermalink }}"
-                width="640"
+                width="{{ $source.Width }}"
+                height="{{ $source.Height }}" 
                 alt="{{ $alt }}"
                 loading="lazy"
             />