باستخدام السمة 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;
}