How to change product image size in Magento 2

Question

In the gird view of a category I want to reduce the number of products per ROW from 4 to 3, and I want to increase the image size there ... how can I do that?

Answer 1

For increasing the image size, we can change the default values in view.xml of our custom theme.

app/design/frontend/{Vendor_Theme}/{Theme_Name}/etc/view.xml

<image id="category_page_grid" type="small_image">
    <width>240</width>
    <height>300</height>
</image>
<image id="category_page_list" type="small_image">
    <width>240</width>
    <height>300</height>
</image>

We can read more here.

From my experience, in Magento 1, we can easily set items per row in products/category pages by adding <action method="setColumnCount"><count>5</count></action>. Currently, Magento 2 doesn't support the set and get column count. However, we can do this by using CSS. For example, we can find the css in file: vendor/magento/theme-frontend-luma/Magento_Catalog/web/css/source/module/_listings.less.

If we want to be more advance, we can add the set and get column count method by overriding the class \Magento\Catalog\Block\Product\ListProduct.

Answer 2

Magento product uses the file view.xml for image size dimensions at path vendor/magento/theme-frontend-luma/etc/view.xml

Here you will find node inside the node.

Copy the file view.xml and put it in your theme path and make the changes, say app/design/frontend/MyThemePackage/MyTheme/etc/view.xml

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
<media>
 <images module="Magento_Catalog">
    ........
    <image id="category_page_list" type="small_image">
         <width>270</width>
         <height>450</height>
    </image>
    ........
  </images>
</media>
......
</view>

Write Below css to change display from 4 to 3 products per row

.page-products .products-grid .product-item {
  margin-left: calc(0.00333333%) !important;
  width: 33.33%!important;
}

Clear the cache and load the category list page. Your changes will be reflected.