چگونه نسبت ابعاد را حفظ کنیم

یادگیری نحوه استفاده از CSS برای حفظ نسبت ابعاد عناصر.

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

مرحله اول - اضافه کردن 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;
}

آزمایش کنید

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