0

On product page im getting white border on top and bottom of my product images.

Reading the doc and some other questions here and here, i think this should be the solution:

theme_dir/etc/view.xml:

<image id="product_page_image_medium" type="image">
    <width>700</width>
    <height>700</height>
    <aspect_ratio>true</aspect_ratio>
    <frame>false</frame>
</image>

While changing width and height does exactly what to be expected, frame does exactly nothing.

Magento 2.3.0

0

You need to set image sizes according to the aspect ratio of images in view.xml file inside your theme

Code would be like this:

<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="bundled_product_customization_page" type="thumbnail">
                <width>140</width>
                <height>140</height>
            </image>
            <image id="cart_cross_sell_products" type="thumbnail">
                <width>200</width>
                <height>248</height>
            </image>
            <image id="cart_page_product_thumbnail" type="small_image">
                <width>165</width>
                <height>165</height>
            </image>
            ........
        </images>
    </media>
    ......
</view>

The only reason that Magento show white border on images because it's width and height is not set according to the aspect ratio of images

Also, set this in all type of images:

<aspect_ratio>true</aspect_ratio>
<frame>false</frame>

Hope this will help

  • The uploaded images have different aspect ratios. – Julime Sep 5 at 11:57
  • then <frame>false</frame> is best approach for your, make sure you copy it to all images blocks – Shoaib Munir Sep 5 at 12:01
  • As stated above, frame does not have any affect. I can't see why editing all the other image blocks could help. Tried it - it didn't. – Julime Sep 5 at 12:25
0

Please set "aspect_ratio" and "frame" to "false"

<image id="product_page_image_medium" type="image">
    <width>700</width>
    <height>700</height>
    <aspect_ratio>false</aspect_ratio>
    <frame>false</frame>
</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.