Assistance Needed with Prehistoric Cavewoman Costume Image

[Sheeks]

I need help with one of my product images. As you can see on my store, the image of the Prehistoric Cavewoman Costume is getting cut off, unlike the other pictures that fit properly within the frame. I’m not sure why this specific image doesn’t fit like the others. Could you please guide me on how to fix this issue?

this one good

but look at this
https://sheeksorority.com/collections/handbag

[AnneLuo]

Hi, @Sheeks 

The original size of this image is different from other images and should be modified to 360 * 360.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[PaulNewton]

Hi @Sheeks to clarify this edit the image itself.

The problem image is rectangular portrait aspect ratio, thin and tall , while the other images are square.

For consistency in themes and any other sales channels edit the image itself to be the proper size similar to the aspect ratio of the other images.

[BSSCommerce-B2B]

Hello, my friend @Sheeks !

I noticed that you have customized the image size in another thread, but the image titled "Prehistoric Cavewoman Costume Image" has an issue. Therefore, I'm providing you with a solution that allows you to resize just that specific image without affecting other customizations on the entire page. You can try the following instructions:

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file.

3. Find the closing </body> tag, which is usually at the bottom of the file.

Before the closing </body> tag, add the following script:

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var imgElement = document.querySelector('#products-template--23094688284947__main-collection > div.main-products-wrapper > div.container > div > div:nth-child(5) > div > div.product-card-img.hover-image > a > div > img.product-first-img.lazyautosizes.lazyloaded');
    
    if (imgElement) {
      imgElement.style.setProperty('object-fit', 'contain', 'important');
    }
  });
</script>

And the result will be: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Sheeks]

i already put but its not working

[PaulNewton]

You don't need code for this, edit the image itself to be the proper aspect ratio, per my other post.

[BSSCommerce-B2B]

Hi @Sheeks , 

Sr about that. 

You can try this code to replace previous my solution. 

<script>
    let imgElement = document.querySelector('#products-template--23094688284947__main-collection > div.main-products-wrapper > div.container > div > div:nth-child(6) > div > div.product-card-img.hover-image > a > div > img.product-first-img.lazyautosizes.lazyloaded');
    
    if (imgElement) {
      // Apply the object-fit property with !important
      imgElement.style.cssText = 'object-fit: contain !important;';
    }
</script>

I tried this code in console view (f12) and worked like this: 

Hope it helps! 

Try this one, my friend!