انڈیپٹیو امیجز یا ریسپانسیو امیجز اسکرین کے سائز یا ڈیوائس کی بنیاد پر صحیح امیجز لوڈ کرنے کے طریقوں کا مجموعہ ہیں۔ مطابقت پذیر تصاویر خود بخود اسکرین کے مختلف سائز اور آلات کے مطابق ایڈجسٹ ہو جاتی ہیں۔ انڈیپٹیو امیجز کے لیے ہر ڈیوائس کے لیے ایک مختلف لے آؤٹ بنانے کی ضرورت ہوتی ہے جس پر ویب پیج تک رسائی حاصل کی جائے گی۔ سی ایس ایس فلیکس باکس کا استعمال کرتے ہوئے انکولی تصاویر آسانی سے بنائی جا سکتی ہیں۔ Flexbox ایک CSS لے آؤٹ ایک جہتی ماڈل ہے جو قطار یا کالم بناتا ہے۔ Flexbox ایک ذمہ دار ڈھانچہ بنانا آسان بناتا ہے۔
یہ پوسٹ CSS Flexbox کے ساتھ انکولی تصاویر بنانے کے لیے رہنمائی فراہم کرے گی۔
سی ایس ایس فلیکس باکس کے ساتھ انڈیپٹیو امیجز کیسے بنائیں؟
CSS Flexbox کا استعمال کرتے ہوئے انکولی تصاویر بنانے کے لیے صارفین کو پہلے HTML ڈھانچہ بنانا ہوگا اور پھر CSS کا اطلاق کرنا ہوگا۔ عملی مظاہرے کے لیے ذیل میں فراہم کردہ طریقہ کار سے گزریں۔
HTML ڈھانچہ بنائیں
بنائیے ایک سب سے پہلے، ترتیب دے کر ایک Flexbox بنائیں ڈسپلے 'پراپرٹی ویلیو' فلیکس ' کے اندر ' تصویر کا کنٹینر ' اگلا، 'کی وضاحت کرکے تصاویر پر سی ایس ایس کا اطلاق کریں۔ img ' کے ساتھ ' .images-container 'نام. سب سے پہلے، سیٹ کریں ' فلیکس 'پراپرٹی ویلیو' 1 دستیاب خالی جگہ کو تصاویر کے درمیان یکساں طور پر تقسیم کرنے کے لیے۔ پھر سیٹ کریں ' زیادہ سے زیادہ چوڑائی 'پراپرٹی ویلیو' 100% اس بات کو یقینی بنانے کے لیے کہ تصاویر ان کی اصل چوڑائی سے زیادہ نہ ہوں۔ مقرر ' اونچائی 'پراپرٹی ویلیو' آٹو پہلو کا تناسب برقرار رکھنے کے لیے۔ آخر میں، ترتیب دے کر تصاویر کے درمیان فاصلہ شامل کریں مارجن 'پراپرٹی ویلیو' 10px ”: CSS Flexbox کا استعمال کرتے ہوئے انکولی امیجز کو کامیابی سے بنایا گیا ہے۔ نیچے کا آؤٹ پٹ ویو براؤزر ونڈو کو لپیٹنے سے پہلے ہے: اب، آئیے براؤزر ونڈو کو لپیٹ کر یہ چیک کریں کہ آیا تصویر انکولی ہے یا نہیں: CSS Flexbox کے ساتھ انکولی تصاویر بنانے کے لیے، صارف کو پہلے HTML ڈھانچہ بنانے کی ضرورت ہے، پھر، اس کی وضاحت ٹیگ
کے اندر شامل کریں ' src تصویر کا راستہ بتانے کے لیے ٹیگ لگائیں اور 'کا استعمال کرتے ہوئے متبادل تصویر شامل کریں۔ سب کچھ ٹیگ:
< div کلاس = 'تصاویر کنٹینر' >
< img src = 'image-1.jpg' سب کچھ = 'پہلی تصویر' >
< img src = 'image-2.jpg' سب کچھ = 'دوسری تصویر' >
div >
سی ایس ایس کا اطلاق کریں۔
ڈسپلے: فلیکس ;
flex-wrap : wrap
}
.images-container img {
flex: 1 ;
زیادہ سے زیادہ چوڑائی: 100 % ;
اونچائی: آٹو؛
مارجن: 10px؛
}
لپیٹنے سے پہلے 
لپیٹنے کے بعد 
اوپر کی تصویر اس بات کی تصدیق کرتی ہے کہ شامل کی گئی تصاویر موافقت پذیر ہیں۔ نتیجہ
ٹیگ پھر، سی ایس ایس کو لاگو کریں، اور سی ایس ایس کے اندر 'ڈسپلے' پراپرٹی کو ' پر سیٹ کریں فلیکس Flexbox بنانے کے لیے۔ اس تحریر نے CSS Flexbox کے ساتھ انکولی امیجز بنانے کے لیے جامع گائیڈ کا مظاہرہ کیا ہے۔