Banner double images getting cropped with increased screen width

Store Design
, , , , , ,

Topic summary

A user is experiencing issues with a dual-image banner that crops and zooms inappropriately as screen width increases to 1500px. Visible cropping affects elements like a model’s arm and chair legs.

Problem specifics:

  • Banner images dynamically zoom in at wider screen widths
  • Parts of images get cropped rather than displaying fully
  • A different page (“CAMPAIGN - ETUDE TO EXISTENCE”) displays similar images correctly, serving as the desired reference

Suggested solution:

  • Check banner settings for “Image fit” or “Position” options
  • Apply CSS fix using object-fit: contain to prevent unwanted zooming while maintaining aspect ratio
  • Ensure max-width: 100% and height: auto are set

Status: One potential solution provided; awaiting implementation feedback.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hello Dear community! :hugs:

I recently changed my banner to include two images but they are not behaving as I’d like them too. They are dynamically zooming in with increased screen width and parts of the pictures are getting cropped. You can see this behaviour in the two screen shots, see the difference in model’s arm and the chair legs as screen width is set to 1500px.

To see a desired outcome, you can click on CAMPAIGN - ETUDE TO EXISTENCE - which starts with the same two pictures but formatted correctly.

Website - maisonmagdalena.com
Password - MaisonMagdalena.222

Many thanks for any help! :blush:

MagdalenaBB_1-1742372278239.png
MagdalenaBB_1-1742372278239.png1718×865 242 KB

MagdalenaBB_2-1742372297209.png
MagdalenaBB_2-1742372297209.png1819×804 264 KB

2

Hi,

Hope this will help

At Check Banner Settings > Look for an option like “Image fit” or “Position” and do the needful

Fix It with Code (If Needed)

CSS code example

.banner img {
  object-fit: contain; /* This prevents zooming */
  max-width: 100%;
  height: auto;
}