From: danix <danix@danix.xyz>
Date: Fri, 17 Mar 2023 11:11:31 +0000 (+0100)
Subject: fixed images display inside a figure element, aka when not inside a gallery.
X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=f112ccc8035741a1158a3341f3a8fea1422e5377;p=theme-danix.xyz.git

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