code to adjust product images or product media container

[MitchellTorres]

I Have a shoe store and have uploaded hundreds of images.  unfortunately they are in a tall format, and I want to lose the top 33% of the image so it would align properly, 

i don't want to change the container size I only want to shorten my images top down by 33%

is it possible to code in the template or them code to auto adjust images in the containers?

[LuffyOnePiece]

Hi @MitchellTorres ,

Can you please share a preview url so that I can assist you on?

Thank you

[MitchellTorres]

of course!

https://zatorres.com/products/balmoral-boot-in-tweed-and-brown-patina 

you will see the boot image is border line anchored to the bottom of the container and it trims off a small amount of the sole.  I would like to lose the top margin which would allow the image to "shift" up"

[MitchellTorres]

a second product: https://zatorres.com/products/tassel-loafer-in-black-calf 

[LuffyOnePiece]

Hi @MitchellTorres 

You can add below css  in base.css file.

.grid__item.product__media-wrapper .media>*:not(.zoom):not(.deferred-media__poster-button) {
    object-fit: contain;
}

Thank you

[MitchellTorres]

Thank you Luffy (great show!)

It fits now, but the image is now smaller than I would like it to be.  If I set the them to the image "small", media fit "fill" and constrain to media to screen height - it accomplishes the same.  I would like the image to be "Large" but still fit.  I am able to accomplish that if I manually crop the image and choose 5:7 and move the editing box to the bottom of the image.  this essentially crops off the top 20 - 33% of my uploaded image.

hope this makes sense.

[LuffyOnePiece · Accepted solution]

Hi @MitchellTorres ,

Can you please try adding below css. Also remove the earlier one.

#shopify-section-template--21679519695150__main .grid__item.product__media-wrapper .media > *:not(.zoom):not(.deferred-media__poster-button) {
    top: -20%;
}

Thank you

[MitchellTorres]

This did EXACTLY what I wanted.  Thank you!!!!!!

[LuffyOnePiece]

Hi @MitchellTorres ,

Can you please like all the comments and mark it as accepted?

Thank you

[MitchellTorres]

I have another question - now that I have the image moved up - there is alot of space below to get to the thumbnails.  Is there now a way to shorten the media container?