From 16dcf7ae37705b8e5d0ab40722100faf138e8c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?H=C3=A5kon=20R=C3=B8skaft?= <haakoero@stud.ntnu.no> Date: Thu, 5 May 2022 13:05:58 +0200 Subject: [PATCH] Made item card display equal sized images --- src/components/ItemComponents/ItemCard.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ItemComponents/ItemCard.vue b/src/components/ItemComponents/ItemCard.vue index 0d81988..34b2971 100644 --- a/src/components/ItemComponents/ItemCard.vue +++ b/src/components/ItemComponents/ItemCard.vue @@ -1,13 +1,15 @@ <template> <div class="mt-5"> <div - class="w-4/5 rounded bg-gray-200 h-full overflow-hidden display:inline-block correct-size" + class="w-[80%] h-full rounded bg-gray-200 overflow-hidden display:inline-block correct-size" > - <img - class="h-3/4" + <div class="relative h-0 pb-[66%]"> + <img + class="w-full h-full absolute inset-0" :src="item.img || require('../../assets/default-product.png')" alt="Item image" /> + </div> <div class="p-1 m-1 bottom-0"> <p class="text-gray-700 text-xs font-bold" id="adress"> {{ item.address }} -- GitLab