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

[amitgandhi21]

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.

[Tom Robertshaw]

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. 

[amitgandhi21]

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.

[gauravkuma56e1]

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>
 

[findstefanc236]

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.)

[rimshadevr27ac]

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.