ایک ریسپانسیو امیج وہ ہوتی ہے جو اسکرین کے سائز سے قطع نظر خود کو مختلف آلات کے مطابق ڈھال سکتی ہے۔ ویب سائٹ پر ایک ذمہ دار تصویر کا ہونا آج کل بہت اہم ہو گیا ہے۔ جیسا کہ یہ نہ صرف ویب سائٹ کو تیز کرتا ہے بلکہ تمام آلات پر صارف کا ٹھنڈا تجربہ بھی پیش کرتا ہے۔ براؤزر کا سائز تبدیل کرکے ریسپانسیو امیجز کا سائز بھی تبدیل کیا جائے گا۔
ریسپانسیو امیجز مختلف ڈیوائسز پر مختلف اسکرین سائزز کے لیے مؤثر طریقے سے اپناتی ہیں۔ یہ یقینی بناتا ہے کہ معیار کو برقرار رکھا گیا ہے۔ جوابی تصاویر کے ساتھ ایک ذمہ دار ویب سائٹ یقینی طور پر مشغولیت اور تبادلوں کی شرح میں اضافہ کرتی ہے۔ میڈیا کے سوالات کے ساتھ سی ایس ایس کا استعمال کرتے ہوئے تصاویر کو جوابدہ بنایا جا سکتا ہے۔
یہ تحریر تصاویر کو جوابدہ بنانے کے لیے HTML اور CSS کا استعمال کرے گی۔
ایچ ٹی ایم ایل اور سی ایس ایس کے ساتھ امیجز کو ریسپانسیو کیسے بنایا جائے؟
ایچ ٹی ایم ایل اور سی ایس ایس کا استعمال کرتے ہوئے امیجز کو ریسپانسیو بنانے کے لیے، درج ذیل مراحل سے گزریں:
- 'زیادہ سے زیادہ چوڑائی' خاصیت کا استعمال کریں۔
- 'چوڑائی' خاصیت کا استعمال کریں۔
- میڈیا کے سوالات کا اطلاق کریں۔
طریقہ 1: 'زیادہ سے زیادہ چوڑائی' پراپرٹی کا استعمال کریں۔
تصویر کو جوابدہ بنانے کا پہلا طریقہ یہ ہے کہ ' زیادہ سے زیادہ چوڑائی ' جائیداد. ' زیادہ سے زیادہ چوڑائی امیج کا استعمال تصویر کی زیادہ سے زیادہ چوڑائی کی وضاحت کے لیے کیا جاتا ہے۔ اگر مواد زیادہ سے زیادہ چوڑائی سے زیادہ ہو جائے تو، یہ عنصر کی اونچائی کو تبدیل کر دے گا۔
HTML بنائیں
HTML کے
ٹیگ میں تصویری فائل شامل کرنے کے لیے، صارفین کوسی ایس ایس شامل کریں۔
اب، ایک بیرونی CSS فائل بنائیں اسے ' کے ساتھ محفوظ کریں۔ سی ایس ایس ” فائل کی توسیع، اور اسے HTML فائل کے
ٹیگ کے اندر لنک کریں۔ CSS فائل میں امیج فائل کو اسٹائل کرنے کے لیے، img ٹیگ سے شروع کریں اور گھنگھریالے منحنی خطوط وحدانی کو کھولیں۔ پھر، گھوبگھرالی تسمہ کے اندر، شامل کریں ' زیادہ سے زیادہ چوڑائی: 100% ؛' کنٹینر کے اندر تصویر کو افقی طور پر فٹ کرنے کے لیے۔ مزید یہ کہ یہ تصاویر کو کاٹنے سے روکے گا۔ اس کے بعد، شامل کریں ' height: آٹو ؛' اونچائی کو خود بخود ایڈجسٹ کرنے کے لیے، تاکہ تصویر صحیح طریقے سے ظاہر ہو:img {
زیادہ سے زیادہ چوڑائی : 100% ;
اونچائی : آٹو ;
}
یہ دیکھنے کے لیے براؤزر ونڈو کا سائز تبدیل کریں کہ تصویر کی پیمائش کیسے ہوتی ہے۔
طریقہ 2: 'چوڑائی' پراپرٹی کا استعمال کریں۔
امیج کو ریسپانسیو بنانے کا دوسرا طریقہ پراپرٹی کو استعمال کرنا ہے۔ چوڑائی ' جائیداد ' چوڑائی ” تصاویر اور متن کی چوڑائی کی وضاحت کرتا ہے۔ اس میں مارجن، پیڈنگ، یا بارڈرز شامل نہیں ہیں۔ یہ تصاویر اور متن کا سائز سینٹی میٹر، px، یا % میں سیٹ کر سکتا ہے۔ ایک تصویر کو جوابدہ بنانے کے لیے، بس تفویض کریں ' چوڑائی ' جائیداد کو ' 100 %' ترتیب ' چوڑائی: 100% ؛' اس کا مطلب ہے کہ تصویر کو اتنا بڑا بنائیں جتنا کہ بنیادی عنصر:
img {چوڑائی : 100% ;
اونچائی : آٹو ; }
مذکورہ بالا اس بات کی تصدیق کرتا ہے کہ تصویر جوابی ہے۔ یہ چیک کرنے کے لیے کہ آیا یہ جوابدہ ہے یا نہیں، بس براؤزر ونڈو کا سائز تبدیل کریں۔
طریقہ 3: میڈیا سوالات کا اطلاق کریں۔
CSS میڈیا کے سوالات صارفین کو ویب صفحہ کی ظاہری شکل کو تبدیل کرنے میں مدد کرتے ہیں۔ CSS میڈیا استفسار میں شرائط شامل ہیں، جب بھی یہ شرائط پوری ہوں گی، یہ آلہ یا براؤزر کی ظاہری شکل کو تبدیل کر دے گی۔ میڈیا کے سوالات بھی صارفین کو تصاویر کو جوابدہ بنانے میں مدد کر سکتے ہیں۔ اس وجہ سے، پہلے، '@ کی وضاحت کریں میڈیا ٹیگ کریں اور پھر وضاحت کریں ' زیادہ سے زیادہ چوڑائی ” پراپرٹی اور منحنی خطوط وحدانی کے اندر ایک تصویر کے لیے زیادہ سے زیادہ چوڑائی تفویض کریں۔ جب بھی یہ شرط پوری ہو گی تصویر کو جواب ملے گا۔ اس کے بعد، گھوبگھرالی منحنی خطوط وحدانی شامل کریں img ٹیگ کی وضاحت کریں، اور ' چوڑائی: 100% ؛' قدر:
@media ( زیادہ سے زیادہ چوڑائی : 480px ) {img {
چوڑائی : 100% ;
}
}
نوٹ : تصویر صرف اس صورت میں جوابدہ ہوگی جب یہ مخصوص شرط پر پورا اترے۔
CSS میڈیا استفسار کو لاگو کر دیا گیا ہے، اور اب اگر تصویر کا سائز مخصوص تصویر کے سائز میں تبدیل کیا جاتا ہے تو وہ ردعمل کے طور پر برتاؤ کرے گی۔ بصورت دیگر، یہ جوابدہ نہیں ہوگا:
نتیجہ
ایچ ٹی ایم ایل اور سی ایس ایس کے ساتھ تصاویر کو جوابدہ بنانے کے لیے، صارفین کے پاس مختلف طریقے ہیں۔ ان طریقوں میں 'کا استعمال کرتے ہوئے تصاویر کو جوابدہ بنانا شامل ہے۔ زیادہ سے زیادہ چوڑائی جائیداد، چوڑائی ” پراپرٹی، اور سی ایس ایس میڈیا استفسار کو لاگو کرکے بھی۔ اس مضمون نے صارفین کو تصاویر کو جوابدہ بنانے کا مکمل حل پیش کیا ہے۔