Consider adding a new pattern or utility classes to support new design pattern

[mtruj013]

We've seen this pattern a lot during the redesign, an image placed within a container with a slightly darker background so it doesn't appear floaty and a 3/2 aspect ratio. We have a custom class for the aspect ratio on u.com and c.com will soon have it as well, but it'd be helpful if this could come from Vanilla itself instead.

Visual

Example from https://ubuntu.com/data/mongodb:

Progressive enhancement

Possibly consider expanding to supporting other aspect ratios and background colors if/where it makes sense. Not sure if edge cases are too few to merit adding more variants but example from https://canonical.com/partners/silicon:

[petesfrench]

Just to add some support for upstreaming this, we are also using this on https://ubuntu.com/download/mediatek-genio

[danielmutis]

@lyubomir-popov to provide more detail on what exactly is needed from Vanilla.

[petesfrench]

There is also another style being used to add spacing around images: u-image-separation

[lyubomir-popov]

We need a small set of utilities to make working with images easier:

• ability to center different sized images in boxes of the same size. Use case: You want a series of pages that have different images to appear the same height, so there's no jumpiong as you move from page to page for example. So far, we've needed 2/3, 3/2, 16/9. I would add 1/1 as that ca nbe useful too

.u-aspect-ratio--3-2 {
  aspect-ratio: 3/2;
}
.u-aspect-ratio--2-3 {
  aspect-ratio: 2/3;
}
.u-aspect-ratio--16-9 {
  aspect-ratio: 16/9;
}
.u-aspect-ratio--2.34 {
  aspect-ratio: 1/2.34;
}
.u-background-highlight {
  background: rgba(0,0,0,.05);
}
.u-image-container--padded {
  padding-top: $spv-small;
}

• we need a utility that adds $spv-small margin-top, so images don't touch horizontal rules above them. we have p-image-wrapper and as pete said, also apparently p-image-separation. We want to avoid this fragmentation, and have something upstream so people don't need to roll their own. We use this in many places

• we need an ability to insulate, or encapsulate some images, like thhe device above, to prevent the white space inside the image merging with white space outside, and creating an untidy look. We use a 3% black underlay to that effect. Would be nice to usptream that as well. cc @bartaz

[jmuzina]

Note related PR that has styling we could upstream as part of this issue: https://github.com/canonical/canonical.com/pull/1251

[jmuzina]

This is being implemented as WD-11412.