fix: replace min-height with aspect-ratio on card-img-wrapper (Safari fix)

Problem

In Safari, height: 100% on an <img> does not resolve when the containing block has only min-height and no explicit height. This is per CSS spec: a percentage height requires a definite height on the containing block. Chrome is lenient and resolves it anyway; Safari follows the spec strictly.

Result: on .card-img-wrapper with min-height: 270px, the image renders at its natural aspect ratio (not cropped/fitted), appearing shifted or overflowing in Safari while Chrome looks correct.

Reproduced on: https://defianceymca.usitcare.org/location (Safari only)

Internal ticket: ITCR-1311

Solution

Replace min-height: 270px with aspect-ratio: 4/3 on .card-img-wrapper.

With a definite aspect ratio, the containing block has a computable height, so height: 100%; object-fit: cover on the image resolves correctly in all browsers including Safari.

Also adds aspect-ratio: unset to the row-cols-lg-1 horizontal layout variant, where the wrapper height should come from flexbox stretching instead of a fixed ratio.

This mirrors the fix already applied to lb_cards (see fix: replace arbitrary min-height with aspect-ratio on card-img-wrapper).

Changes

  • modules/small_y_cards/assets/scss/small_y_cards.scss: min-height: 270px → aspect-ratio: 4/3; add aspect-ratio: unset for row-cols-lg-1
  • modules/small_y_cards/assets/css/small_y_cards.css: compiled output

Merge request reports

Loading
Loading