Responsive image aspect ratio variants

[jmuzina]

Done

Adds new -on-(large|medium|small) variants of each aspect ratio image container class for more precise control over aspect ratios, depending on the screen size.

Fixes #5274, WD-13920

QA

• Open the responsive-all example and verify that the aspect ratio labels above each example there are correct by resizing the window.
  • Make sure to check at the breakpoints. As long as there are not two classes for the same breakpoint, no two responsive aspect ratio classes should be active.
    • Large: width >=1036px
    • Medium: 620px >= width < 1036px
    • Small: width < 620px
• Verify the responsive examples were added to the combined image example
• Review image container with aspect ratio docs
• Review 4.16.0 release notes

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 release (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.

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

I'm not sure what the best way to document the list of aspect ratio classes is here, since there are so many of them (one for each combination of breakpoint and aspect ratio, and another one that applies to all aspect ratios)

I've added a table similar to the Grid page:

As well as an entry in the class-refs table:

[lyubomir-popov]

I'm not sure what the best way to document the list of aspect ratio classes is here, since there are so many of them (one for each combination of breakpoint and aspect ratio, and another one that applies to all aspect ratios)

A table is good enough, but I would widen the first column to prevent wrapping.

Also, might be good to add some explanation as to why we do this - for example, mention that tall aspect ratios can cause a lot of scrolling on mobile, so a change to a less wasteful aspect ratio can be useful. on the other hand, a cinematic format is great when there's sufficient width (at least 9 columns), but for smaller screens, switching to 16x9 or 3x2 might allow more detail to be visible.

+1 for easier merging once the above is added

[jmuzina]

A table is good enough, but I would widen the first column to prevent wrapping.

I've updated the table so that the first column does not wrap on large & medium screens.

Also, might be good to add some explanation as to why we do this - for example, mention that tall aspect ratios can cause a lot of scrolling on mobile, so a change to a less wasteful aspect ratio can be useful. on the other hand, a cinematic format is great when there's sufficient width (at least 9 columns), but for smaller screens, switching to 16x9 or 3x2 might allow more detail to be visible.

I've added an explanation for reasons to use these responsive classes.

[jmuzina]

Updated to use inequalities rather than @media ((min|max)-width), as with #5315

[jmuzina]

@pastelcyborg I needed to merge main to resolve release notes conflicts - can you re-approve and also review Percy build please?

Note that image combined example is now screenshotted responsively to test the -on-medium classes.