كيف - نسبة العرض إلى الارتفاع
تعرف على كيفية الحفاظ على نسبة العرض إلى الارتفاع لعنصر باستخدام CSS.
ابعاد متزنة
قم بإنشاء عناصر مرنة تحافظ على نسبة العرض إلى الارتفاع (4: 3 ، 16: 9 ، إلخ) عند تغيير حجمها:
ما هي نسبة العرض إلى الارتفاع؟
تصف نسبة العرض إلى الارتفاع للعنصر العلاقة التناسبية بين عرضه وارتفاعه. نسبتا العرض إلى الارتفاع الشائعة للفيديو هما 4: 3 (تنسيق الفيديو العالمي للقرن العشرين) ، و 16: 9 (عالمي للتلفزيون عالي الدقة والتلفزيون الرقمي الأوروبي ، والافتراضي لمقاطع فيديو YouTube).
كيف - ارتفاع يساوي العرض
الخطوة 1) أضف HTML:
استخدم عنصر حاوية ، مثل <div> ، وإذا كنت تريد نصًا بداخله ، فأضف عنصرًا فرعيًا:
مثال
<div class="container">
<div class="text">Some text</div> <!-- If
you want text inside the container -->
</div>
الخطوة 2) أضف CSS:
أضف قيمة النسبة المئوية padding-top
للمحافظة على نسبة العرض إلى الارتفاع لعنصر DIV. المثال التالي سينشئ نسبة عرض إلى ارتفاع 1: 1 (الطول والعرض متساويان دائمًا):
مثال 1: 1 نسبة العرض إلى الارتفاع
.container {
background-color: red;
width: 100%;
padding-top: 100%; /* 1:1 Aspect
Ratio */
position: relative; /* If you want
text inside of it */
}
/* If you
want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
نسب أخرى:
مثال 16: 9 نسبة العرض إلى الارتفاع
.container {
padding-top: 56.25%; /* 16:9 Aspect
Ratio (divide 9 by 16 = 0.5625) */
}
مثال 4: 3 نسبة العرض إلى الارتفاع
.container {
padding-top: 75%; /*
4:3 Aspect
Ratio (divide 3 by 4 = 0.75) */
}
مثال 3: 2 نسبة العرض إلى الارتفاع
.container {
padding-top: 66.66%; /*
3:2 Aspect
Ratio (divide 2 by 3 = 0.6666) */
}
مثال 8: 5 نسبة العرض إلى الارتفاع
.container {
padding-top: 62.5%; /*
8:5 Aspect
Ratio (divide 5 by 8 = 0.625) */
}