aspect-ratio
mülkü sayesinde, kartı yeniden boyutlandırdığınızda yeşil görsel blok 16 x 9 en boy oranını korur. aspect-ratio: 16 / 9
ile en boy oranına uyuyoruz.
.video {
aspect-ratio: 16 / 9;
}
Bu özellik olmadan 16 x 9 en-boy oranını korumak için bir padding-top
hilesi kullanmanız ve en-genişlik oranını ayarlamak için 56.25%
dolgu eklemeniz gerekir. Yakında, saldırıları ve yüzdeyi hesaplama ihtiyacını önlemek için bu özelliği kullanıma sunacağız. 1 / 1
oranında kare, 2 / 1
oranında 2'ye 1 resim ve bu resmin belirli bir boyut oranında ölçeklendirilmesi için ihtiyacınız olan her şeyi oluşturabilirsiniz.
.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;
}