From 047eccbd3c7bc86ec809c0d1ff45fcfc095efbe0 Mon Sep 17 00:00:00 2001
From: eerosahlberg <esahlber2004@gmail.com>
Date: Mon, 22 Apr 2024 13:26:53 +0300
Subject: [PATCH] Update browse.js

---
 pages/item/browse.js | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/pages/item/browse.js b/pages/item/browse.js
index c21b793..456fe2a 100644
--- a/pages/item/browse.js
+++ b/pages/item/browse.js
@@ -20,6 +20,7 @@ import {
 	Image,
 	SimpleGrid,
 	Select,
+	AspectRatio,
 } from '@chakra-ui/react';
 import prisma from '../../utils/prisma';
 import NextLink from 'next/link';
@@ -85,16 +86,16 @@ export default function BrowseItems({ items, categories }) {
 					position='relative'
 					_hover={{ shadow: '2xl', transform: 'scale(1.01)', transition: 'all 0.2s', zIndex: 1 }}
 				>
-					<Image
-						src={item.image}
-						alt={`Picture of ${item.name}`}
-						width='500px'
-						height='300px'
-						roundedTop='lg'
-						objectFit='cover'
-						objectPosition='center'
-						fallbackSrc='https://via.placeholder.com/500x300'
-					/>
+					<AspectRatio ratio={5 / 3}>
+						<Image
+							src={item.image}
+							alt={`Picture of ${item.name}`}
+							roundedTop='lg'
+							objectFit='cover'
+							objectPosition='center'
+							fallbackSrc='https://via.placeholder.com/500x300'
+						/>
+					</AspectRatio>
 
 					<Box margin={'1.5em'} marginTop={'0.5em'}>
 						<Flex mt='1' justifyContent='space-between' alignContent='center'>