Aqui está o que eu quero:
- Um elemento contêiner com um único filho
- O elemento contêiner recebeu uma largura e uma altura
- O elemento filho recebeu uma proporção
- O elemento filho deve ser o maior possível no elemento contêiner, mas sempre mantendo sua proporção e nunca ser maior que seu pai
- O elemento filho deve poder ser posicionado à esquerda/centro/direita e superior/centralizado/inferior no contêiner
O código HTML é fácil:
<div class="container">
<div class="child">I should keep my aspect ratio maximized!</div>
</div>
A parte CSS é mais difícil ^^' Tentei resolver com grid, e minha melhor tentativa é esta:
.container {
height: 200px; /* Sample height. */
width: 150px; /* Sample width. */
background-color: yellow;
overflow: auto; /* Just to make the container... */
resize: both; /* ...resizable for testing. */
display: grid;
grid-template-columns: 100%;
grid-template-rows: 100%;
align-items: center; /* Here I specify start/center/end. */
justify-items: center; /* Here I specify start/center/end. */
}
.child{
aspect-ratio: 3 / 2; /* Here I specify aspect ratio. */
max-width: 100%;
max-height: 100%;
background-color: lime;
overflow: auto;
}<div class="container">
<div class="child">I should keep my aspect ratio maximized!</div>
</div>Isso funciona muito bem para contêineres pequenos, mas quando a criança tiver largura suficiente para caber o texto em uma única linha, ela para de crescer! E não consigo encontrar uma maneira de contornar isso.
Se for possível conseguir o que desejo em HTML e CSS, ficarei grato se alguém puder me ajudar, seja me dizendo como transformar minha solução em uma solução funcional, ou sugerindo uma nova abordagem que eu possa adotar.