fixed images display on smaller screens

diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss
index 67f156c..ed82f28 100644 (file)
--- a/assets/sass/components/_image.scss
+++ b/assets/sass/components/_image.scss
@@ -51,10 +51,11 @@
 \r
                        img {\r
                                width: 100%;\r
+                               height: auto;\r
                        }\r
                        div.picture {\r
+                               width: 100%;\r
                                max-width: 100%;\r
-                               height: auto;\r
                        }\r
                }\r
 \r
@@ -65,11 +66,12 @@
 \r
                        img {\r
                                width: 100%;\r
+                               height: auto;\r
                                max-width: 100%;\r
                        }\r
                        div.picture {\r
+                               width: 100%;\r
                                max-width: 100%;\r
-                               height: auto;\r
                        }\r
 \r
                        @include breakpoint('<=small') {\r

diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html
index f5f29ca..9f537cf 100644 (file)
--- 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