Landing page picture scale to fit mobile screen

Store Design
,

Topic summary

Goal: make the landing page image on the “Taste” theme fill the mobile screen and scale across sizes, cropping if needed (similar to Zara).

Requests: a supporter asked for the store URL to provide tailored guidance.

Proposed approach: calculate the image’s aspect ratio (height ÷ width × 100), then set a CSS rule like height: [result]vw. This uses vw (viewport width) units so the image height scales proportionally to the screen width, helping the image fill the mobile viewport.

Support offer: further, more precise instructions offered if the site URL is shared.

Status: no confirmed implementation or resolution yet; awaiting the store URL and potential follow-up.

Notes: CSS refers to styling rules for web pages; vw is a unit equal to 1% of the viewport width, useful for responsive scaling.

Summarized with AI on February 3. AI used: gpt-5.
1

Hi,

I am trying to modify my “Taste” theme so that the landing page picture fills out the mobile screen. Just like zara.com. No matter screen size, the landing page picture will always scale to fit, and if that is impossible to do, the image will crop.

How can I achieve this effect?

/ Carl

1 Like
2

Hi @CarlKling

Please share your store URl

3

Hi @CarlKling

This is Victor from PageFly - Landing Page Builder App.

You can try this way.

  1. check width and height of that image

  2. Calculate this (height / width) * 100. (Example result is: 45)

  3. Add one css height: 45vw;

    Or can you send me URL I can give you solution better .

Hope this answer helps.
Best regards,
Victor | PageFly