CSS aspect-ratio ਵਿਸ਼ੇ

تعریف اور استعمال

aspect-ratio پائیدار قدر، عناصر کی چوڑائی اور بلندی کا تناسب کو دینا چاہئے.

اگر اس کا تعین کیا گیا ہے تو: aspect-ratio اور چوڑائی پائیدار قدر، بلندی کا تناسب کے مطابق بلندی کا مقصدی قدر تیار کیا جائے گا.

پائیدار قدر کی بہتر تشخیص کے لئے، aspect-ratio پائیدار قدر، لاحقہ میں دیکھئے:

نکات:پاسخگویانہ کاری میں استعمال کریں aspect-ratio اگر عناصر کی چوڑائی بلندی کا تناسب کسی بھی صورت میں تبدیل ہونا چاہئے تو، آپ چاہتے ہیں کہ چوڑائی اور بلندی کا تناسب رکھا جائے:

مثال

مثال 1

عناصر کی بلندی بلندی کا تناسب اضافے کریں:

div {
  aspect-ratio: 3 / 2;
}

خود کو کچھ کریں

مثال 2

اگر div عناصر کی چوڑائی بلندی کا تناسب کسی بھی صورت میں تبدیل ہونا چاہئے تو:aspect-ratio اس خاص اقدار، div عناصر کی چوڑائی اور بلندی کا تناسب کنٹرول کرنے کے لئے بہت مناسب ہیں. مثلاً، فٹر لیبریری میں، آپ چاہتے ہیں کہ div عناصر کی چوڑائی بلندی کا تناسب کسی بھی آلات پر سخت نہ ہو، لیکن تصاویر کا چوڑائی بلندی کا تناسب رکھا جائے:

#container > div {
  aspect-ratio: 3/2;
}
<div id="container">
  <div>گلی</div>
  <div>شہر کی سڑک کی وردی</div>
  <div>پائیں کی ماؤنٹینز</div>
  <div>Cinque Terre</div>
</div>

خود کو کچھ کریں

CSS گرامر

aspect-ratio: اعداد/اعداد|initial|inherit;

پائیدار قدر

تکنیکی تفصیلات

براوزر سپورٹ

جداول میں دکھائی دیئے جانے والی اعداد، اس کیئر اپ پر پورا طور پر سپورٹ کرنے والی براوزر کی نسلی شمار کو ظاہر کرتی ہیں。

متعلقہ پیج

تدریس:CSS ਗ੍ਰਿੱਡ ਲੈਜ਼ਰ ਮੌਡੂਲ

منبع:CSS Object-fit ਪ੍ਰਾਪਰਟੀ

منبع:CSS Object-position ਪ੍ਰਾਪਰਟੀ