Merge pull request #302 from fpdrozd/fix/product-carousel-image-size

fix: add image width and height props to the product card
vuestorefront-community · Apr 12, 2023 · e6ae1d2 · e6ae1d2
2 parents 0a8d94d + 6030917
commit e6ae1d2
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/theme/pages/Home.vue b/packages/theme/pages/Home.vue
@@ -93,6 +93,8 @@
             <SfProductCard
               :title="productGetters.getName(product)"
               :image="productGetters.getCoverImage(product)"
+              :imageWidth="240"
+              :imageHeight="240"
               :regular-price="$n(productGetters.getPrice(product).regular, 'currency')"
               :max-rating="5"
               :score-rating="productGetters.getAverageRating(product)"
@@ -342,6 +344,10 @@ export default {
     }
     &__product {
       --product-card-add-button-transform: translate3d(0, 30%, 0);
+      ::deep img {
+        width: 100%;
+        height: auto;
+      }
     }
   }
   ::v-deep .sf-arrow--long .sf-arrow--right {