بطاقة صورة نسبة العرض إلى الارتفاع

باستخدام السمة aspect-ratio، تحافظ الكتلة المرئية الخضراء على نسبة العرض إلى الارتفاع هذه التي تبلغ 16 x ‏9 عند تغيير حجم البطاقة. نحن نراعي نسبة العرض إلى الارتفاع مع aspect-ratio: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

للحفاظ على نسبة العرض إلى الارتفاع 16 x ‏9 بدون هذه السمة، عليك استخدام padding-top hack وإعطائها مساحة بادئة 56.25% لضبط نسبة العرض إلى الارتفاع. سنضيف قريبًا خاصيّة لهذا الغرض لتجنّب عمليات الاختراق والحاجة إلى احتساب النسبة المئوية. يمكنك إنشاء صورة مربّعة بنسبة 1 / 1 أو صورة بنسبة عرض إلى ارتفاع 2 إلى 1 باستخدام 2 / 1، أو أيّ صورة أخرى تريد تكبيرها أو تصغيرها بنسبة حجم محدّدة.

.square {
  aspect-ratio: 1 / 1;
}

<div class="parent">
  <div class="card">
    <h1>Video Title</h1>
    <div class="visual"></div>
    <p>Descriptive Text goes here</p>
  </div>
</div>

        .parent {
  display: grid;
  place-items: center;
}

.visual {
  aspect-ratio: 16 / 9;
}

.card {
  width: 50%;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}