From e4ae7780e732e2f0b66dec8c52c1019f13adc685 Mon Sep 17 00:00:00 2001
From: "P. Douglas Reeder" <reeder.29@gmail.com>
Date: Wed, 21 Aug 2024 20:13:07 -0400
Subject: [PATCH] prevents crash & prevents picture tags from overflowing their
 column

---
 eleventy.config.images.js | 2 +-
 public/css/index.css      | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/eleventy.config.images.js b/eleventy.config.images.js
index 0b4a82372..a88e36964 100644
--- a/eleventy.config.images.js
+++ b/eleventy.config.images.js
@@ -41,7 +41,7 @@ module.exports = function(eleventyConfig) {
 		// TODO loading=eager and fetchpriority=high
 		let imageAttributes = {
 			alt,
-			sizes,
+			sizes: sizes || "100vw",
 			loading: "lazy",
 			decoding: "async",
 		};
diff --git a/public/css/index.css b/public/css/index.css
index f7d67c6b7..e843022a7 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -268,3 +268,9 @@ a[href].header-anchor:focus,
 h2 + .header-anchor {
 	font-size: 1.5em;
 }
+
+/* prevents picture tags produced by eleventy-img from overflowing their column */
+picture > img {
+	max-width: 100%;
+	height: auto;
+}