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

This commit is contained in:
Dillon 2022-05-13 02:01:35 +08:00
parent 568fe8f5fc
commit 428d8b88ab
No known key found for this signature in database
GPG key ID: 0EF4AE57FB98F108
3 changed files with 23 additions and 10 deletions

View file

@ -230,14 +230,19 @@
img { img {
display: block; display: block;
width: 100%;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
overflow: hidden; overflow: hidden;
} }
} }
.lazyloading { .lazyload, .lazyloading {
@include object-fit(none); @include object-fit(scale-down);
}
.lazyloaded {
@include object-fit(fill);
} }
blockquote { blockquote {

View file

@ -1,7 +1,11 @@
{{- /* lazysizes and lightgallery */ -}} {{- /* lazysizes and lightgallery */ -}}
{{- $src := .Src -}} {{- $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 -}} {{- $src = .RelPermalink -}}
{{- $width = $width | default .Width -}}
{{- $height = $height | default .Height -}}
{{- end -}} {{- end -}}
{{- $small := .SrcSmall | default $src -}} {{- $small := .SrcSmall | default $src -}}
@ -21,18 +25,22 @@
<img <img
class="lazyload{{ with .Class }} {{ . }}{{ end }}" class="lazyload{{ with .Class }} {{ . }}{{ end }}"
src="{{ $loading.RelPermalink }}" src="{{ $loading.RelPermalink }}"
data-src="{{ .Src | safeURL }}" data-src="{{ $src | safeURL }}"
data-srcset="{{ $small | safeURL }}, {{ .Src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
data-sizes="auto" data-sizes="auto"
alt="{{ $alt }}"{{ with .Height }} height="{{ . }}"{{ end }}{{ with .Width }} width="{{ . }}"{{ end }} /> alt="{{ $alt }}"
{{- with $width }} width="{{ . }}"{{ end }}
{{- with $height }} height="{{ . }}"{{ end }} />
</a> </a>
{{- else -}} {{- else -}}
<img <img
class="lazyload{{ with .Class }} {{ . }}{{ end }}" class="lazyload{{ with .Class }} {{ . }}{{ end }}"
src="{{ $loading.RelPermalink }}" src="{{ $loading.RelPermalink }}"
data-src="{{ .Src | safeURL }}" data-src="{{ $src | safeURL }}"
data-srcset="{{ $small | safeURL }}, {{ .Src | safeURL }} 1.5x, {{ $large | safeURL }} 2x" data-srcset="{{ $small | safeURL }}, {{ $src | safeURL }} 1.5x, {{ $large | safeURL }} 2x"
data-sizes="auto" data-sizes="auto"
alt="{{ $alt }}" 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 -}} {{- end -}}

File diff suppressed because one or more lines are too long