Include height/width for cover images

assets/css/post.css

@@ -79,8 +79,17 @@
   &-cover {
     border: 20px solid var(--accent);
     background: transparent;
-    margin: 40px 0;
+    margin: 10px 0 0;
     padding: 20px;
+    display: inline-block;
+    object-fit: cover;
+
+    img {
+      min-width: 100%;
+      max-width: 100%;
+      height: auto;
+      width: auto;
+    }
 
     @media (--phone) {
       padding: 10px;

layouts/partials/cover.html

@@ -1,24 +1,32 @@
 {{- $cover := false -}}
-{{- $autoCover := default $.Site.Params.autoCover false }}
+{{- $coverImg := false -}}
+{{- $autoCover := default $.Site.Params.autoCover false -}}
 
 {{- if index .Params "cover" -}}
-  {{- if .Resources.GetMatch .Params.Cover }}
+  {{- if .Resources.GetMatch .Params.Cover -}}
-    {{- $cover = (.Resources.GetMatch .Params.Cover).RelPermalink -}}
+    {{- $coverImg = (.Resources.GetMatch .Params.Cover) -}}
+    {{- $cover = $coverImg.RelPermalink -}}
   {{- else -}}
     {{- $cover = relURL .Params.Cover -}}
   {{- end -}}
 {{- else if $.Site.Params.AutoCover -}}
   {{- if (not .Params.Cover) -}}
     {{- if .Resources.GetMatch "cover.*" -}}
-      {{- $cover = (.Resources.GetMatch "cover.*").RelPermalink -}}
+      {{- $coverImg = .Resources.GetMatch "cover.*" -}}
+      {{- $cover = $coverImg.RelPermalink -}}
     {{- end -}}
   {{- end -}}
 {{- end -}}
 
 {{if $cover -}}
-  <!-- Cover image found -->
+<div class="post-cover">
   <img src="{{ $cover }}"
-    class="post-cover"
     alt="{{ .Title | plainify | default " " }}"
-    title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}" />
+    title="{{ .Params.CoverCredit |plainify|default "Cover Image" }}"
-{{- end }}
+    {{- if $coverImg -}}
+    width="{{ $coverImg.Width }}"
+    height="{{ $coverImg.Height }}"
+    {{- end -}}
+  />
+</div>
+{{- end -}}