Есть ли что-то вроде «object-fit: contains» для незаменяемых элементов? ⇐ CSS

[Anonymous]

Недавно я пытался создать центрированный элемент div с соотношением сторон 3/7, который максимально заполнил бы его родительский элемент, действуя примерно как object-fit: contains. К сожалению, object-fit: contains, похоже, не работает для незаменяемых элементов.
Вот визуализация того, чего я хочу достичь во Flutter, и это то, что я делаю. у вас немного больше опыта.
https://dartpad.dev/?id=eec1210050a099d ... fa66e891e5

Код: Выделить всё

import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: AspectRatio(
aspectRatio: 3 / 7,
child: ColoredBox(color: const Color(0xFF42A5F5))),
),
),
);
}
}

Когда высота контейнера меньше его ширины, высота блока должна быть такой же, как и его контейнер.


Когда ширина контейнера меньше его высоты, ширина блока должна быть такой же, как и ширина его контейнера.


Все это время должен всегда оставаться в центре экрана и сохранять соотношение сторон 7/3.
Это то, что я придумал до сих пор, но оно не реагирует на высоту становится меньше ширины.

Код: Выделить всё

* {
margin: 0;
}

html,
body {
width: 100%;
height: 100%;
}

.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
flex-direction: column;
}

.blue {
background-color: royalblue;
aspect-ratio: 3 / 7;
flex-grow: 1;
max-width: 100%;
}

Код: Выделить всё

codepen
В Discord, just_13eck предложил решение, в котором вместо этого использовался этот CSS:

Код: Выделить всё

body {
margin: 0;
}

.container {
display: flex;
block-size: 100vh;
}

.blue {
flex: 1 1 0;
background-color: royalblue;
aspect-ratio: 3 / 7;
margin-inline: auto;
margin-block: auto;
max-inline-size: calc((3 / 7) * 100vh);
max-block-size: 100%;
}

И это работает! НО это работает только относительно размера области просмотра.
Может ли кто-нибудь мне помочь?
Я бы очень признателен; Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/793 ... d-elements