Add autoscaling of images to mobile browsers

Currently, on mobile devices that are not wide enough for the images
in the blog, the image sets the max width of the blog and downscales
all the text relative to it, leading to crushed text and a large empty
space on the right side.

I've reproduced this using Google Chrome developer tools, setting the
device mode to emulate an iPhone X, but it appears to occur any time
the mobile device has a screen width smaller than the image
to be displayed.

The code change here hints that the max width of the image
should be 100% of the screen width, not an absolute number of pixels,
and the height will be automatically adjusted to maintain
the image aspect ratio.

1 files changed, 5 insertions, 0 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 6426d6f..defde73 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -6,6 +6,11 @@ body {
     font-family: helvetica, arial, sans-serif;
 }
 
+img {
+  max-width: 100%;
+  height: auto;
+}
+
 h1, h2, h3, h4, h5, h6 {
     margin-bottom: 0;
     line-height: 1.2em;