fix: missing height and weight of img element and lazyload object-fit…

… style
dillonzq · May 12, 2022 · 428d8b8 · 428d8b8
1 parent 568fe8f
commit 428d8b8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 10 deletions.
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
@@ -230,14 +230,19 @@
 
       img {
         display: block;
+        width: 100%;
         height: auto;
         margin: 0 auto;
         overflow: hidden;
       }
     }
 
-    .lazyloading {
-      @include object-fit(none);
+    .lazyload, .lazyloading {
+      @include object-fit(scale-down);
+    }
+
+    .lazyloaded {
+      @include object-fit(fill);
     }
 
     blockquote {

diff --git a/layouts/partials/plugin/image.html b/layouts/partials/plugin/image.html
@@ -1,7 +1,11 @@
 {{- /* lazysizes and lightgallery */ -}}
 {{- $src := .Src -}}
-{{- with dict "Path" .Src "Resources" .Resources | partial "function/resource.html" -}}
+{{- $width := .Width -}}
+{{- $height := .Height -}}
+{{- with dict "Path" $src "Resources" .Resources | partial "function/resource.html" -}}
     {{- $src = .RelPermalink -}}
+    {{- $width = $width | default .Width -}}
+    {{- $height = $height | default .Height -}}
 {{- end -}}
 
 {{- $small := .SrcSmall | default $src -}}
@@ -21,18 +25,22 @@
         <img
             class="lazyload{{ with .Class }} {{ . }}{{ end }}"
             src="{{ $loading.RelPermalink }}"
-            data-src="{{ .Src | safeURL }}"
-            data-srcset="{{ $small | safeURL }}, {{ .Src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+            data-src="{{ $src | safeURL }}"
+            data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
             data-sizes="auto"
-            alt="{{ $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} />
+            alt="{{ $alt }}"
+            {{- with $width }} width="{{ . }}"{{ end }}
+            {{- with $height }} height="{{ . }}"{{ end }} />
     </a>
 {{- else -}}
     <img
         class="lazyload{{ with .Class }} {{ . }}{{ end }}"
         src="{{ $loading.RelPermalink }}"
-        data-src="{{ .Src | safeURL }}"
-        data-srcset="{{ $small | safeURL }}, {{ .Src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
+        data-src="{{ $src | safeURL }}"
+        data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
         data-sizes="auto"
         alt="{{ $alt }}"
-        title="{{ .Title | default $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} />
+        title="{{ .Title | default $alt }}"
+        {{- with $width }} width="{{ . }}"{{ end }}
+        {{- with $height }} height="{{ . }}"{{ end }} />
 {{- end -}}
diff --git a/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content b/resources/_gen/assets/scss/css/style.scss_d75fd08668b4bae707167bbce4d8ca46.content