Resizing photo for desktop

[NickyZabetian]

We have a product image with text as our main header on our homepage that does not seem to resize on desktop, therefore it cuts off part of our product. Instead of cropping the photo, can it resize it so the image stays centered and you can see the product in its entirety? Thank you!

[devcoders]

Hi @NickyZabetian

try this code.

.image-with-text__image .media,
.image-with-text__image picture,
.image-with-text__image img {
object-fit: contain !important;
}

[Moeed]

Hey @NickyZabetian

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.image-with-text__item img {
    object-fit: contain !important;
}
</style>

RESULT:

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[Chloe.paker]

Product image is getting cut because of this top black bar, you can see when you change screen size it resize.
I can give you the CSS code to fix it.

[tim_tairli]

There is some sort of initial animation applied to this image which keeps it transformed to 130%.
Probably because your theme is old – 2.x.x when current is 5.x.x and modern browsers – they did update the animation code since…

My recommendation is to go to theme setting-> “custom css” setting and paste this code:

picture.media > img {
  transform: none !important;
}

Before /after:

→

object-fit: contain would produce this:

[NickyZabetian]

Thank you everyone! Fixed!