Fix aspect ratio in image container component on smaller screens

[jmuzina]

Done

Fixes image container aspect ratio not being respected on smaller displays.

Fixes #5159

QA

• Open demo
• Verify that all images are the correct aspect ratio in all breakpoints.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

[pastelcyborg]

Clever! It seems to me there are two big gotchas with this approach that we should consider:

1. It won't work at all for full-bleed images; we'll either need an entirely new component or to use Modifiers to alter its approach significantly
2. It relies on the images being presented fitting within a specific range of dimensions; particularly wide or tall images could be problematic

If we're comfortable with these compromises, I think it works.

[bartaz]

Adapted from: https://nikitahl.com/css-aspect-ratio

[jmuzina]

Demos.haus did not automatically build last week due to some IS issues, but my push to resolve version # merge conflict just now seems to have triggered a demos.haus build successfully without posting the demo link to this PR.

Demo is at https://vanilla-framework-5179.demos.haus/

[lyubomir-popov]

Borders on the structure example seem to have a bit too much contrast, unless this is intended:

looks like they are not using the correct colour. Shouild be the low-contrast one.

[jmuzina]

Borders on the structure example seem to have a bit too much contrast, unless this is intended:

looks like they are not using the correct colour. Shouild be the low-contrast one.

@lyubomir-popov
I accidentally posted that comment here, it should be at #5182

CC @pastelcyborg

[jmuzina]

@pastelcyborg Can you please link your codepen here and talk a bit about pros/cons comparing these approaches?

[jmuzina]

@bartaz Can you please write a bit here about your alternative approach with applying the aspect ratio on parent & image and then using the image macro to specify metrics?

[lyubomir-popov]

LGTM!

[bartaz]

@jmuzina @pastelcyborg I may have found a cleaner solution. First, switched to flex from grid, as we really don't need grid here (although it probably can be achieved with grid as well, but not by default). And second, and kind of the clue of the solution, is using the combination of max-height: 100% and object-fit: contain on the image itself. So that image doesn't make the container larger (container keeps it's aspect ratio), but the image doesn't get squashed, because of the contain.

Haven't found any issues with this approach yet.

[jmuzina]

@bartaz GH won't let me approve this as it's originally my PR, but this looks good !

[jmuzina]

@lyubomir-popov has approved this in MM

[jmuzina]

Running a Percy check manually using Percy label as this was modified by Bartek before the Percy label bug (#5188 ) was fixed

Edit: Percy build created, and has expected changes :)

[bartaz]

on behalf of @jmuzina