How to force the original aspect ratio on banner images on mobile?

[Ontarni]

Mobile image banners don't scale properly in Dawn. I used separate image banners for mobile with the recommended 800x800.

I used a code in base.css:

@media screen and (max-width: 749px) {
.banner__media { height: auto !important; }
.banner__media img { object-fit: contain !important; position: relative !important; }
}

And it resolved an issue on the mobile view from shopify store: 

Click to expand...

But when opening the store on my phone it looks **bleep**ty:

Click to expand...

I tried different ratios to do it without a code, but in that case on some mobile phones it looked perfectly, but on different didn't and every picture was scalling differently. 

The best scenario is to force shopify to show the original aspect ratio on every mobile for every image, as I am trying to add multiple image banners one after another to create one long picture.

Store link: https://fbbf11-37.myshopify.com/

[BSS-TekLabs]

- Here is the solution for you
- Please follow these steps:

- Then find the base.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media screen and (max-width: 370px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 30rem !important;
    }
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Ontarni]

Thank you!

It works on two mobile phones that I checked, but on the third one (iphone 14) it looks like this whenever photos from image banners meet:

Click to expand...

What might be the issue?

[BSS-TekLabs · Accepted solution]

@media screen and (max-width: 370px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 30rem !important;
    }
}
@media screen and (min-width: 400px) and (max-width: 749px) {
    .banner--medium.banner--mobile-bottom:not(.banner--adapt) .banner__media{
       height: 36rem !important;
    }
}

@Ontarni you can try it