تناسب رکھنے کا طریقہ

یاد بگیر کس طرح سے آئی سی ایس کا استعمال کریں تاکہ ایلیemente کا تناسب رکھا جاسکے。

چگونه انجام دهیم - ارتفاع برابر با عرض

مرحله اول - اضافه کردن HTML:

از عناصر کانتینر، مانند <div>، اگر می‌خواهید در داخل آن متن داشته باشید، یک عنصر فرزند اضافه کنید:

<div class="container">
  <div class="text">متن</div> <!-- اگر می‌خواهید در داخل کانتینر متن داشته باشید -->
</div>

مرحله دوم - اضافه کردن CSS:

برای padding-top برای حفظ تناسب عرض به ارتفاع DIV، درصد اضافه کنید. در مثال زیر یک DIV با تناسب عرض به ارتفاع 1:1 ایجاد می‌شود (ارتفاع و عرض همیشه برابر هستند):

مثال - تناسب عرض به ارتفاع 1:1

.container {
  background-color: red;
  width: 100%;
  padding-top: 100%; /* تناسب عرض به ارتفاع 1:1 */
  position: relative; /* اگر می‌خواهید در داخل آن متن داشته باشید */
}
/* اگر می‌خواهید در داخل کانتینر متن داشته باشید */
.text {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

آزمایش کنید

تناسب‌های عرض به ارتفاع دیگر

مثال - تناسب عرض به ارتفاع 16:9

.container {
  padding-top: 56.25%; /* تناسب عرض به ارتفاع 16:9 (9 تقسیم بر 16 برابر 0.5625 است) */
}

آزمایش کنید

مثال - تناسب عرض به ارتفاع 4:3

.container {
  padding-top: 75%; /* تناسب عرض به ارتفاع 4:3 (3 تقسیم بر 4 برابر 0.75 است) */
}

آزمایش کنید

مثال - تناسب عرض به ارتفاع 3:2

.container {
  padding-top: 66.66%; /* تناسب عرض به ارتفاع 3:2 (2 تقسیم بر 3 برابر 0.6666 است) */
}

آزمایش کنید

مثال - تناسب عرض به ارتفاع 8:5

.container {
  padding-top: 62.5%; /* تناسب عرض به ارتفاع 8:5 (5 تقسیم بر 8 برابر 0.625 است) */
}

آزمایش کنید

ویژگی aspect-ratio CSS

در مرورگرهای جدیدتر، می‌توانید به سادگی از CSS استفاده کنید aspect-ratio ویژگی:

مثال - تناسب عرض به ارتفاع 3:2

.container {
  aspect-ratio: 3 / 2;
}

آزمایش کنید

تبلیغات می‌زند که اولین نسخه مرورگر پشتیبانی‌کننده از این ویژگی است.