From de7ab636bc20c39080185cf7a4edf02e4eb58591 Mon Sep 17 00:00:00 2001
From: Rodolfo Carvalho <rhcarvalho@gmail.com>
Date: Tue, 18 Jun 2019 16:02:21 +0100
Subject: [PATCH] Use actual width in image processing examples

The image processing examples are rendered within containers with a
'nested-img' parent CSS class, which by default makes images responsive
by resizing them to the size of their containers.

That doesn't work well for the examples as the small images end up
stretched.

Since there can be other images in the same 'nested-img' context, we
keep that class in the parent and set the example images width to auto,
such that they will render with their actual size.

On small screens, larger images will still be sized down via the
max-width property.

Fixes #812
---
 layouts/shortcodes/imgproc.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/layouts/shortcodes/imgproc.html b/layouts/shortcodes/imgproc.html
index f44b509c2..5e02317c6 100644
--- a/layouts/shortcodes/imgproc.html
+++ b/layouts/shortcodes/imgproc.html
@@ -12,7 +12,7 @@
 {{ end }}
 {{ $image := .Scratch.Get "image" }}
 <figure style="padding: 0.25rem; margin: 2rem 0; background-color: #cccc">
-	<img style="max-width: 100%; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
+	<img style="max-width: 100%; width: auto; height: auto;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
 	<figcaption>
 	<small>
 	{{ with .Inner }}