woocommerce category view - same height, the proportions of the image to remain the same
Budget: €8 – €30 EUR
Hello, we have the following problem with our shop. We had to use JavaScript to bypass the automatic thumbnails that WooCommerce creates for the customer, as some of the images were cropped. This created the problem that the images were different sizes.
We have now tried to solve the problem as follows:
<a href="" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<img fetchpriority="high" fetchpriority="high" width="650" height="625" src="" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" decoding="async" srcset="" sizes="(max-width: 650px) 100vw, 650px">
<h2 class="woocommerce-loop-product__title">„BlockX“-Tasche</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>21,00<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
</a>
.woocommerce-LoopProduct-link img {
height: 200px !important;
width: auto !important;
}
Now the images are stretched if they are horizontal in size. As there is unfortunately no div around the <img> element:
The aim is for the images to have the same height, the proportions of the image to remain the same and the shop titles to start at the same height
We have now tried to solve the problem as follows:
<a href="" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
<img fetchpriority="high" fetchpriority="high" width="650" height="625" src="" class="attachment-woocommerce_thumbnail size-woocommerce_thumbnail" alt="" decoding="async" srcset="" sizes="(max-width: 650px) 100vw, 650px">
<h2 class="woocommerce-loop-product__title">„BlockX“-Tasche</h2>
<span class="price"><span class="woocommerce-Price-amount amount"><bdi>21,00<span class="woocommerce-Price-currencySymbol">€</span></bdi></span></span>
</a>
.woocommerce-LoopProduct-link img {
height: 200px !important;
width: auto !important;
}
Now the images are stretched if they are horizontal in size. As there is unfortunately no div around the <img> element:
The aim is for the images to have the same height, the proportions of the image to remain the same and the shop titles to start at the same height