Replace aspect ratio options with min aspect ratios

[dithom]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

Right now the aspect ratio options lead to elements being displayed in the exact aspect ratio, while the inner element is set to position: absolute. This way the content is not able to dynamically grow in height, if the aspect ratio is too small on a specific breakpoint.

You can avoid this issue by using a different aspect ratio 'hack', as described here https://matthiasott.com/notes/aspect-ratio-in-css

Maybe this could be replaced with the current implementation of aspect ratio or at least added as 'min-aspect-ratio'?

Motivation and context

There are often cases, when you want a card element to have a specific aspect ratio on screen sizes with enough space. However smaller screens break these layouts by not providing enough space for the cards content and the cards height needs to adjust to the content.

[ffoodd]

Thanks for pointing this out and providing reference, this is really apporeciated!

IMHO the aspect-ratio should be in V6 target, this is so much better.

Regarding the other way around, it might be better but it'd lead to unexpected changes for people using the current helper. I think it'd be a breaking change.

Flagging for V6 for sure, but I'd like another opinion regarding v5.

[dithom]

Thanks for reply! Yes I agree, a replacement might lead to unwanted behavior for existing layouts. A new feature would be better. Glad you like the idea :)

[Lucas-Wong-Eng]

I believe this new feature would help a lot. The cards in Bootstrap are beautiful and I am wishing they could be well displayed on smaller screens with less additional work. By the way, could you tell us when will the v6 come out? Thank for your reply. @ffoodd

[dithom]

Additionally the aspect ratio classes could be implemented with a responsive feature. I often find my self in situations, where I need a card component to be auto height on smartphones, square min. aspect ratio on tablet and 16:9 min. aspect ratio on desktop. I use something like this:

.aspect-ratio {
    &::before {
        float: left;
        content: '';
    }

    &::after {
        display: table;
        clear: left;
        content: ' ';
    }
}

@each $breakpoint in map-keys($grid-breakpoints) {
    @include media-breakpoint-up($breakpoint) {
        $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

        .aspect-ratio {
            &#{$infix}-1-1 {
                &::before {
                    padding-top: 100%;
                }
            }

            &#{$infix}-4-3 {
                &::before {
                    padding-top: 75%;
                }
            }

            &#{$infix}-16-9 {
                &::before {
                    padding-top: 56.25%;
                }
            }
        }
    }
}

Of course the padding-top values and prefixes could be implemented with their own map like just like $grid-breakpoints.

[ffoodd]

We didn't even start working on V6 since we're only getting feedback and moving on v5.

aspect-ratio property as a utility can already be achieved thanks to the utilities API, and even made responsive. For people coming across this issue, and whose browser support allow to use this property, this is really easy:

$utilities: map-merge(
  $utilities,
  (
    "aspect-ratio": (
      property: aspect-ratio,
      responsive: true,
      values: '1', '4 / 3', '16 / 9'
    )
  )
);

Done!

[dithom]

Wow! I was wondering what the new import with the suffix 'api' was all about, thanks for pointing this out, this is an awesome new feature in v5! 🔥 @ffoodd v5 just came out last year 😉 so I guess we need to be patient if it will be flagged for v6 finally

[mdo]

Confirmed we're doing the utilities with aspect-ratio in v6.