From: danix <danix@danix.xyz>
Date: Fri, 17 Mar 2023 14:32:24 +0000 (+0100)
Subject: fixed images display on smaller screens
X-Git-Url: https://git.danix.xyz/?p=theme-danix.xyz.git;a=commitdiff_plain;h=1bb5bdce0e57a62c05a3b6cbb49890acc2a94152

fixed images display on smaller screens
---

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 67f156c..ed82f28 100644
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -51,10 +51,11 @@
 
 			img {
 				width: 100%;
+				height: auto;
 			}
 			div.picture {
+				width: 100%;
 				max-width: 100%;
-				height: auto;
 			}
 		}
 
@@ -65,11 +66,12 @@
 
 			img {
 				width: 100%;
+				height: auto;
 				max-width: 100%;
 			}
 			div.picture {
+				width: 100%;
 				max-width: 100%;
-				height: auto;
 			}
 
 			@include breakpoint('<=small') {
diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index f5f29ca..9f537cf 100644
--- a/layouts/shortcodes/img.html
+++ b/layouts/shortcodes/img.html
@@ -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