From bbdcc80334d856452c06320ba9493f21dd9a985c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20Helle=C5=9Ben?= <tlovinator@gmail.com>
Date: Mon, 9 Mar 2026 20:07:30 +0100
Subject: [PATCH] Update image rendering to preserve aspect ratio by removing
 height attribute

---
 templates/twitch/campaign_detail.html        |  2 +-
 templates/twitch/game_detail.html            |  2 +-
 templates/twitch/reward_campaign_detail.html |  2 +-
 twitch/tests/test_views.py                   | 25 ++++++++++++++++++++
 4 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/templates/twitch/campaign_detail.html b/templates/twitch/campaign_detail.html
index 93a3af1..b7ca368 100644
--- a/templates/twitch/campaign_detail.html
+++ b/templates/twitch/campaign_detail.html
@@ -21,7 +21,7 @@
     {% endfor %}
     <!-- Campaign image -->
     {% if campaign.image_best_url %}
-        {% picture campaign.image_best_url alt=campaign.name width=160 height=160 %}
+        {% picture campaign.image_best_url alt=campaign.name width=160 %}
     {% endif %}
     <!-- Campaign description -->
     <p>{{ campaign.description|linebreaksbr }}</p>
diff --git a/templates/twitch/game_detail.html b/templates/twitch/game_detail.html
index 02b96fd..83538a0 100644
--- a/templates/twitch/game_detail.html
+++ b/templates/twitch/game_detail.html
@@ -16,7 +16,7 @@
     </div>
     <!-- Game image -->
     {% if game.box_art_best_url %}
-        {% picture game.box_art_best_url alt=game.name width=160 height=160 %}
+        {% picture game.box_art_best_url alt=game.name width=160 %}
     {% endif %}
     <!-- Game owner -->
     {% if owners %}
diff --git a/templates/twitch/reward_campaign_detail.html b/templates/twitch/reward_campaign_detail.html
index 29b1469..3f69108 100644
--- a/templates/twitch/reward_campaign_detail.html
+++ b/templates/twitch/reward_campaign_detail.html
@@ -17,7 +17,7 @@
     </p>
     <!-- Campaign image -->
     {% if reward_campaign.image_best_url %}
-        {% picture reward_campaign.image_best_url alt=reward_campaign.name width=160 height=160 %}
+        {% picture reward_campaign.image_best_url alt=reward_campaign.name width=160 %}
     {% endif %}
     <!-- RSS Feeds -->
     <div style="margin-bottom: 1rem;">
diff --git a/twitch/tests/test_views.py b/twitch/tests/test_views.py
index 1f32860..627c0d3 100644
--- a/twitch/tests/test_views.py
+++ b/twitch/tests/test_views.py
@@ -930,6 +930,31 @@ class TestChannelListView:
         assert response.status_code == 200
         assert "game" in response.context
 
+    @pytest.mark.django_db
+    def test_game_detail_image_aspect_ratio(self, client: Client, db: object) -> None:
+        """Box art should render with a width attribute only, preserving aspect ratio."""
+        game: Game = Game.objects.create(
+            twitch_id="g3",
+            name="Game3",
+            display_name="Game3",
+        )
+        # property is derived; write to underlying field
+        game.box_art = "https://example.com/boxart.png"
+        game.save()
+        url: str = reverse("twitch:game_detail", args=[game.twitch_id])
+        response: _MonkeyPatchedWSGIResponse = client.get(url)
+        html: str = response.content.decode("utf-8")
+        # the picture tag should include the width but not an explicit height
+        assert 'width="160"' in html
+        # ensure the height attribute is not part of the same img element
+        assert (
+            "height="
+            not in html.split("https://example.com/boxart.png")[1].split(
+                ">",
+                maxsplit=1,
+            )[0]
+        )
+
     @pytest.mark.django_db
     def test_game_detail_view_serializes_owners_field(
         self,