W przypadku usługi aspect-ratio
, gdy zmieniasz rozmiar karty, zielony blok wizualny zachowuje format obrazu 16 x 9. Uwzględniamy format obrazu aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
Aby zachować format obrazu 16 x 9 bez tej właściwości, musisz użyć padding-top
hacka i ustawić dla niego wypełnienie 56.25%
, aby ustawić stosunek wysokości do szerokości. Wkrótce udostępnimy usługę, która pozwoli uniknąć konieczności stosowania tego obejścia i obliczania odsetka. Możesz utworzyć kwadrat za pomocą formatu 1 / 1
, formatu 2:1 za pomocą 2 / 1
i tak naprawdę dowolnego formatu, którego potrzebujesz, aby obraz był skalowany zgodnie z ustawionym formatem.
.square {
aspect-ratio: 1 / 1;
}
HTML
<div class="parent">
<div class="card">
<h1>Video Title</h1>
<div class="visual"></div>
<p>Descriptive Text goes here</p>
</div>
</div>
CSS
.parent {
display: grid;
place-items: center;
}
.visual {
aspect-ratio: 16 / 9;
}
.card {
width: 50%;
display: flex;
flex-direction: column;
padding: 1rem;
}