🐛 Fix: missing height and weight of img element and lazyload object-fit style

CHANGELOG.md

@@ -20,6 +20,7 @@ All notable changes to this project will be documented in this file.
 - :bug: Fix: support smooth migration from LoveIt to FixIt ([#174](https://github.com/hugo-fixit/FixIt/discussions/174) [#182](https://github.com/hugo-fixit/FixIt/issues/182))
 - :bug: Fix: `center-quote` shortcode rendering error when config `unsafe = false` (@yureiita[#160](https://github.com/hugo-fixit/FixIt/pull/160))
 - :bug: Fix: menu item invalid params `draft` in submenu
+- :bug: Fix: missing height and weight of img element and lazyload object-fit style
 - :art: Style: change the default icons of some social links
 - :globe_with_meridians: Docs(i18n): update pt-br, de in i18n
 - :mag: Perf(SEO): enhance SEO performance

assets/css/_page/_single.scss

@@ -282,14 +282,20 @@
 
       img {
         display: block;
+        width: 100%;
         height: auto;
         margin: 0 auto;
         overflow: hidden;
       }
     }
 
+    .lazyload,
     .lazyloading {
-      @include object-fit(none);
+      @include object-fit(scale-down);
+    }
+
+    .lazyloaded {
+      @include object-fit(fill);
     }
 
     blockquote {
@@ -360,6 +366,7 @@
     }
 
     .typeit {
+      // TODO refactor
       .code {
         padding: 0.375rem;
         font-size: 0.875rem;

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,8 +25,8 @@
     <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 }} />
   </a>
@@ -30,9 +34,11 @@
   <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 -}}