כשמשנים את הגודל של הכרטיס, הנכס aspect-ratio
שומר על יחס הגובה-רוחב של 16x9 בבלוק החזותי הירוק. אנחנו שומרים על יחס הגובה-רוחב של aspect-ratio: 16 / 9
.
.video {
aspect-ratio: 16 / 9;
}
כדי לשמור על יחס גובה-רוחב של 16x9 בלי המאפיין הזה, צריך להשתמש בהאק של padding-top
ולהוסיף לו ריבוע פאדינג בגודל 56.25%
כדי להגדיר יחס גובה-רוחב. בקרוב יהיה לנו נכס לצורך כך, כדי למנוע את הפריצה ואת הצורך לחשב את האחוז. אפשר ליצור תמונה ריבועית ביחס 1 / 1
, תמונה ביחס 2 ל-1 ביחס 2 / 1
, ובעצם כל תמונה שרוצים שאפשר יהיה לשנות את הגודל שלה לפי יחס גובה-רוחב מוגדר.
.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;
}