Attempt to fix the issue of oversized images (#2)

Remove the unused img-small class. Add a new image class to the images displayed in the carousel. This class is used to set images to a height of 280px which will scale down when the width of the page is decreased. This will break compatibility for IE users unfortunately. However, given it's tiny market share nowadays, this may be a worthy trade-off
flashcarts · Feb 4, 2024 · 958a47d · 958a47d
1 parent 56f979e
commit 958a47d
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/_layouts/app.html b/_layouts/app.html
@@ -29,7 +29,7 @@
 									{% if page.website %}<a href="{{ page.website }}">{% elsif page.source %}<a href="{{ page.source }}">{% endif %}
 										{% if page.images.size > 0 %}
 											<div class="card-header">
-												<img class="mx-auto d-block mw-100" src="{{ page.images[0].url }}" alt="{{ page.images[0].description | default: page.title | escape }}">
+												<img class="mx-auto d-block mw-100 app-image" src="{{ page.images[0].url }}" alt="{{ page.images[0].description | default: page.title | escape }}">
 											</div>
 										{% endif %}
 										<div class="card-body" dir="ltr">
@@ -144,7 +144,7 @@ <h2 class="i18n innerHTML-images">Images</h2>
 												<div class="carousel-inner">
 													{% for img in page.images %}
 														<div class="carousel-item mt-2 mb-2 {% if forloop.first %}active{% endif %}">
-															<img src="{{ img.url }}" class="d-block mx-auto" alt="{{ img.description }}">
+															<img src="{{ img.url }}" class="d-block mx-auto app-image" alt="{{ img.description }}">
 															<div class="carousel-caption d-none d-md-block">
 																<h5 class="carousel-label">{{ img.description }}</h5>
 															</div>

diff --git a/_sass/base.scss b/_sass/base.scss
@@ -261,13 +261,6 @@ html[dir=rtl] .navbar-toggler {
 	color: $nav-link-color-hover;
 }
 
-// Make images smaller
-.img-small {
-	max-width: 250px;
-	max-height: 250px;
-}
-
-
 html:not([dir=rtl]) {
 	.btn-back {
 		position: absolute;
@@ -437,6 +430,13 @@ html[dir=rtl] .li-bullet {
 	margin-right: 1.5em;
 }
 
+// Prevent oversized images in cart pages
+.app-image{
+	height:280px;
+	width:auto;
+	object-fit:contain;
+}
+
 // Hide header anchors unless hovering the header
 .header-anchor {
 	text-decoration: none;