<div class="product-item-info">
                            <a href="" class="product-item-photo">

<span class="product-image-container" style="width: 240px;">
    <span class="product-image-wrapper" style="padding-bottom: 125%;">
        <img class="product-image-photo" src="\cache\809bd17f35759fb4e353b4573e6cfcee\//e/k/ekelund_csa_white_diagonal_lin_cb.png" max-width="240" max-height="300" alt="test 3"></span>

How can I change the default max-width and max-height of the image ?

2 Answers 2


In order to set the default Image size, you need to edit the image settings(width and height) on etc/view.xml file.

If you are using custom theme, then go to the below file path

vendor / magento / theme-frontend-blank (or Luma Theme) / etc / view.xml

Copy the file and add in your custom theme on below path

app / design / frontend / [vendor] / [theme] / etc / view.xml


<image id="new_products_content_widget_list" type="small_image">

In Magento 1, To change the image size we have to change on every listing page. So we have to remember all the file lists and search on the whole site.

In Magento 2, We have good news to resize the image. We do not need to remember all the files. All the size is managing from 1 file view.xml.

View.xml file located in app/design/vendor/theme/etc

<image id="category_page_grid" type="small_image"> <!-- This size will apply on the listing page for grid view --><width>200</width><height>200</height></image><image id="category_page_list" type="small_image"> <!-- This size will apply on the listing page for List view --><width>250</width><height>250</height></image>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.