Images box won't adjust for different aspect ratios

Store Design

Topic summary

Main issue: Product image gallery does not adjust to mixed aspect ratios, causing square images to appear compressed at the top when followed by tall portrait images.

Details: A Shoptimized theme product page shows severe layout issues with the 2nd (very long) and 4th (extra wide) images; link provided to illustrate. Images are central to understanding the problem.

Proposed fix: Enable “adaptive height” in the slider code and remove custom CSS setting height: auto. Adaptive height is a slider option that adjusts the container’s height based on each slide’s dimensions to prevent squishing.

Follow‑up: The store owner asks how to locate and change these settings/files, noting limited coding experience.

Status: Unresolved and ongoing.

Action items:

  • Identify where the slider is implemented (theme settings or theme files) and turn on adaptive height.
  • Audit custom CSS for height declarations (including height: auto) affecting the slider or image container and remove/adjust them.
  • If unclear, seek step‑by‑step guidance from the theme’s documentation or support, or enlist a developer to implement the changes.
Summarized with AI on March 4. AI used: gpt-5.
1

Hi there,

I am having an issue where the image box on the product page won’t adjust for different aspect ratios.

For example, if a product has 2 images. One image is square, and another is rectangle (portrait), then the square image will be squished to the top of the rectangular area. This looks pretty ugly and I would prefer it to automatically adjust to the aspect ratio of said image.

Here is one of my products in questions:

https://houux.com/collections/linen-cabinets/products/legion-furniture-wh8020-20-side-cabinet-for-wh83

As you can see the second image is very long and is causing the problem, if you click on the 4th image this is the most extreme example as it is the widest.

The theme is Shoptimized and I have a funny feeling it’s gonna be something code related, but probably a quick fix.

Any expert advice would be greatly appreciated!

Thanks

1 Like
2

@Jackbennett01

can you please user adapt heightin slider code remove your custom css height: auto

3

Hi there, thanks for getting back to me. How do I find and change this? I’m not too familliar with code