docs: add a new partial for responsive images and use imageConfig (#39779)

This way the dimensions are not hardcoded

site/layouts/partials/responsive-img.html

@@ -0,0 +1,22 @@
+{{- /*
+  Accepts context, classes, imgPath, alt and lazyload
+*/ -}}
+
+{{- $lazy := .lazyload | default true -}}
+{{- $classes := slice "img-fluid" "mx-auto" | append (slice .classes) -}}
+
+{{- $basePath := path.Join "/docs" .context.Site.Params.docs_version (path.Dir .imgPath) -}}
+{{- $basename := path.BaseName .imgPath -}}
+{{- $ext := path.Ext .imgPath -}}
+{{- $imgPath := path.Join $basePath (printf "%s%s" $basename $ext) -}}
+{{- $imgPath2x := path.Join $basePath (printf "%s@2x%s" $basename $ext) -}}
+
+{{- with (imageConfig (path.Join "/site/static" $imgPath)) }}
+<img class="{{ delimit $classes " " }}"
+     srcset="{{ $imgPath }}, {{ $imgPath2x }} 2x"
+     src="{{ $imgPath }}"
+     alt="{{ $.alt }}"{{ if eq $lazy true }}
+     loading="lazy"{{ end }}
+     width="{{ .Width }}"
+     height="{{ .Height }}">
+{{- end }}