آج کل، جوابی پس منظر کی تصاویر والی ویب سائٹس کی مانگ ہے۔ ریسپانسیو ویب سائٹس صارفین کو موبائل، ٹیبلیٹ، یا ڈیسک ٹاپس سمیت تقریباً تمام آلات پر مثالی صارف تجربہ فراہم کرتی ہیں۔ ریسپانسیو امیجز ویب سائٹ کے پس منظر، اسکرین کے سائز اور طول و عرض کو ڈھال سکتی ہیں۔ جوابدہ تصاویر اس بات کو یقینی بناتی ہیں کہ معیار اور تناسب برقرار رکھا جائے۔ مزید برآں، جوابی پس منظر کی تصاویر والی ویب سائٹ تیزی سے لوڈ ہو جاتی ہے۔
یہ گائیڈ پس منظر کی تصاویر کو اسکرین کے طول و عرض میں ڈھالنے کے لیے ہدایات فراہم کرے گا۔
پس منظر کی تصاویر کو اسکرین کے طول و عرض میں کیسے ڈھالیں؟
ذیل میں دی گئی مرحلہ وار ہدایات کے ذریعے تصویر اسکرین کے طول و عرض کے مطابق بن سکتی ہے۔
مرحلہ 1: ایک HTML ڈھانچہ بنائیں
سب سے پہلے، ایک HTML ڈھانچہ بنائیں اور استعمال کرکے بیرونی اسٹائل شیٹ شامل کریں۔ HTML کے ہیڈ سیکشن میں ٹیگ۔ اس مقصد کے لیے، صرف ' ہیڈ ٹیگ کے اندر۔ ' rel ٹیگ HTML دستاویز کے ساتھ فائل کے تعلق کی وضاحت کرتا ہے۔ ' href ٹیگ سی ایس ایس فائل کا پتہ بتاتا ہے:
< html >
< سر >
< لنک rel = 'اسٹائل شیٹ' href = 'style.css' >
< عنوان > قبول پس منظر کی تصویر عنوان >
سر >
< جسم >
-- دوسرے مواد کو شامل کرنے کا علاقہ -- >
جسم >
html >
مرحلہ 2: CSS کا اطلاق کریں۔
اب سی ایس ایس کو ' جسم سیکشن سب سے پہلے، پس منظر کی تصویر کی وضاحت کریں۔ اس مقصد کے لیے استعمال کریں ' پس منظر کی تصویر 'اور وضاحت کریں' url() تصویر فائل ایڈریس پر مشتمل قدر۔
اس کے بعد، استعمال کریں ' پس منظر کی تصویر تصویر کا سائز بتانے کے لیے، پس منظر دوبارہ 'تصویر کی تکرار سیٹ کرنے کے لیے پراپرٹی، اور' پس منظر سے منسلک یہ سیٹ کرنے کے لیے کہ آیا تصویر باقی صفحے کے ساتھ اسکرول کرتی ہے یا نہیں۔ آخر میں، سیٹ کریں ' مارجن 'اور' بھرتی 'سے' 0 ”:
جسم {پس منظر کی تصویر: یو آر ایل ( 'test-image.jpg' ) ;
پس منظر کا سائز: 100 % 100 % ;
/* تصویر کو اسکیل کریں۔ 100 % چوڑائی اور 100 % اونچائی */
background-repeat: no-repeat؛
پس منظر منسلکہ: فکسڈ؛
مارجن: 0 ;
بھرتی: 0 ;
/* اختیاری: فکسڈ پس منظر */
}
آؤٹ پٹ
براؤزر ونڈو کو معاہدہ کرنے سے پہلے یہ آؤٹ پٹ ہے:
براؤزر کے سنکچن کے بعد:
مندرجہ بالا آؤٹ پٹ اس بات کی تصدیق کرتا ہے کہ تصویر نے پس منظر کو اسکرین کے طول و عرض میں ڈھال لیا ہے۔
نتیجہ
پس منظر کی تصاویر کو اسکرین کے طول و عرض میں ڈھالنے کے لیے، پہلے، ' ویو پورٹ طول و عرض اور اسکیلنگ کو کنٹرول کرنے کے لیے ہیڈ سیکشن میں۔ پھر، ایک HTML ڈھانچہ بنائیں اور CSS کا اطلاق کریں۔ سی ایس ایس میں، سیٹ کریں ' پس منظر کا سائز 'پراپرٹی ویلیو' احاطہ کسی تصویر کی اونچائی اور چوڑائی کو پیمانہ کرنے کے لیے قدر۔ اس مضمون نے پس منظر کی تصاویر کو اسکرین کے طول و عرض میں ڈھالنے کے لیے ایک مکمل گائیڈ پیش کیا ہے۔