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

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

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

للحفاظ على نسبة عرض إلى ارتفاع تبلغ 16 × 9 بدون هذه السمة، يجب استخدام اقتراح 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;
}