Category page showing unaligned images because of a different size

[joe_elbaz]

Hi.

Our website under development right now on smnlf.com. You can open any category to see the issue.

We use API to import our products with their CDN link for images. This images doesn't have the same ratio all along. So we need to figure a solution.

We thought about making all the images boxes same size and have the image either filling it or sitting in the middle vertical position (center).

Do you know of any existing method of doing it or any idea?

Thanks in advance.

[Sarvagya Pandey]

Hello joe_elbaz

In your theme, app/design/frontend/MyThemePackage/MyTheme/etc/view.xml , in view.xml you can set the size of images accordingly. 

<media>
<images module="Magento_Catalog">
<image id="bundled_product_customization_page" type="thumbnail">
<width>140</width>
<height>140</height>
</image>
<image id="cart_cross_sell_products" type="thumbnail">
<width>400</width>
<height>400</height>
</image>
<image id="cart_page_product_thumbnail" type="small_image">
<width>165</width>
<height>165</height>
</image>
<image id="category_page_grid" type="small_image">
<width>265</width>
<height>361</height>
</image>
<image id="category_page_grid-1" type="small_image">
<width>265</width>
<height>361</height>
</image>
<image id="category_page_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="customer_account_my_tags_tag_view" type="small_image">
<width>100</width>
<height>100</height>
</image>
<image id="customer_account_product_review_page" type="image">
<width>285</width>
<height>285</height>
</image>
<image id="customer_shared_wishlist" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="gift_messages_checkout_small_image" type="small_image">
<width>90</width>
<height>90</height>
</image>
<image id="gift_messages_checkout_thumbnail" type="thumbnail">
<width>100</width>
<height>100</height>
</image>
<image id="mini_cart_product_thumbnail" type="thumbnail">
<width>76</width>
<height>98</height>
</image>
<image id="new_products_content_widget_grid" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="new_products_content_widget_list" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="new_products_images_only_widget" type="small_image">
<width>78</width>
<height>78</height>
</image>
<image id="product_base_image" type="image">
<width>265</width>
<height>265</height>
</image>
<image id="product_comparison_list" type="small_image">
<width>140</width>
<height>140</height>
</image>
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>800</width>
<height>800</height>
</image>
<image id="product_page_image_small" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_page_main_image" type="image">
<width>800</width>
<height>800</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>800</width>
<height>800</height>
</image>
<image id="product_page_more_views" type="thumbnail">
<width>88</width>
<height>110</height>
</image>
<image id="product_stock_alert_email_product_image" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="product_small_image" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="product_thumbnail_image" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="recently_compared_products_grid_content_widget" type="small_image">
<width>240</width>
<height>400</height>
</image>
<image id="recently_compared_products_images_names_widget" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="recently_compared_products_images_only_widget" type="thumbnail">
<width>76</width>
<height>76</height>
</image>
<image id="recently_compared_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="recently_viewed_products_grid_content_widget" type="small_image">
<width>240</width>
<height>400</height>
</image>
<image id="recently_viewed_products_images_names_widget" type="small_image">
<width>90</width>
<height>90</height>
</image>
<image id="recently_viewed_products_images_only_widget" type="small_image">
<width>76</width>
<height>76</height>
</image>
<image id="recently_viewed_products_list_content_widget" type="small_image">
<width>270</width>
<height>340</height>
</image>
<image id="related_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="review_page_product_image" type="small_image">
<width>285</width>
<height>285</height>
</image>
<image id="rss_thumbnail" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="sendfriend_small_image" type="small_image">
<width>90</width>
<height>90</height>
</image>
<image id="shared_wishlist_email" type="small_image">
<width>135</width>
<height>135</height>
</image>
<image id="side_column_widget_product_thumbnail" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="upsell_products_list" type="small_image">
<width>400</width>
<height>400</height>
</image>
<image id="wishlist_sidebar_block" type="thumbnail">
<width>90</width>
<height>90</height>
</image>
<image id="wishlist_small_image" type="small_image">
<width>113</width>
<height>113</height>
</image>
<image id="wishlist_thumbnail" type="small_image">
<width>240</width>
<height>400</height>
</image>
</images>
</media>

In above you can set the size of products accordingly. 

Hope it will help you.