You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
27 lines
956 B
27 lines
956 B
/*
|
|
* AspectRatio recipe — sets `aspect-ratio` on the Box shell and stretches
|
|
* the direct child to fill the box. The element itself is laid out by the
|
|
* cascade (block-level by default) and shrinks the ratio to its inline
|
|
* size, so combining with `maxWidth`, `width` or grid placement on the
|
|
* Box works without extra plumbing.
|
|
*
|
|
* Why not the legacy padding-bottom hack? CSS `aspect-ratio` ships in
|
|
* every modern browser and avoids the absolute-positioning of children
|
|
* that the padding-bottom trick requires. Cleaner DOM, fewer caveats
|
|
* around overflow / scrollbars.
|
|
*/
|
|
|
|
[data-box][data-aspect-ratio] {
|
|
aspect-ratio: var(--aspect-ratio, 1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Stretch the lone child (img / iframe / video / picture / inner div) to
|
|
fill the box without disturbing replaced-element intrinsic ratios when
|
|
they happen to match. */
|
|
[data-box][data-aspect-ratio] > * {
|
|
inline-size: 100%;
|
|
block-size: 100%;
|
|
object-fit: cover;
|
|
}
|