cancel
Showing results for 
Search instead for 
Did you mean: 

How to remove white space around product image in magento 2 Luma?

How to remove white space around product image in magento 2 Luma?

I tried to resize product image in product description page and it does successfully however, it shows too much space around image. I need to put product detail tab below the product image but it shows so much space around image. Please advise me how to remove that space around product image.

<transparency>false</transparency> I have used this tag but still it shows so much space around image.

5 REPLIES 5

Re: How to remove white space around product image in magento 2 Luma?

Do you have a screenshot you could share to better explain the issue?

 

It could be that the dimensions that you're requesting to the display the product image doesn't match the aspect ratio of the images uploaded to admin. So in order for Magento to resize to fit, it needs to add white space around two sides of the photo. 

----
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution" as appropriate. Thanks!

Re: How to remove white space around product image in magento 2 Luma?

Here I have attached four screen shots.
I tried to resize image in view.xml file, it shows too much space around
that. please advise me how to remove that space.

Re: How to remove white space around product image in magento 2 Luma?

hey @amitgandhi21  please try to

<image id="category_page_list" type="small_image">
                <width>240</width>
                <height>300</height>
                <transparency>false</transparency>
                <aspect_ratio>false</aspect_ratio>
                <frame>false</frame>
            </image>
 

Re: How to remove white space around product image in magento 2 Luma?

Error happened during deploy process: The XML in file "/home/.../etc/view.xml" is invalid:
Element 'aspect_ratio': This element is not expected. Expected is ( background ).
Line: 88

Verify the XML and try again.

 

(This issue is happening if not both elements width and height are specified.)

Re: How to remove white space around product image in magento 2 Luma?

Here are some tips to remove white space around product images in Magento 2 Luma:

  • In view.xml layout file, set image width and height to 100% to fill the container
  • Use CSS to target .product.media and .product.media img to remove padding and constrain image size
  • Consider a 3rd party extension like MagicToolbox MagicZoom for responsive, zoomable images
  • Ensure your product images are high quality, properly sized and cropped before uploading
  • Check that your image containers or blocks don't have extra margins or padding

The key is using a combination of layout XML, CSS, high quality images and eliminating unnecessary elements that cause extra whitespace around images.