כרטיס תמונה עם יחס גובה-רוחב

כשמשנים את הגודל של הכרטיס, הנכס 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;
}