یہاں سی ایس ایس کا استعمال کرتے ہوئے ذمہ دار ڈیزائن تصاویر کو کیسے شامل کرنا ہے
مقبول ویب سائٹس آج دیکھو اور ایک ڈیزائن علاج ہے جو آپ کو دیکھنے کے لئے اس بات کا یقین ہے کہ بڑے، اسکرین سپانسنگ پس منظر کی تصاویر ہے. ان تصاویر کو شامل کرنے کے ساتھ چیلنجوں میں سے ایک یہ سب سے بہترین عمل سے آتا ہے کہ ویب سائٹس کو مختلف اسکرین کے سائز اور آلات کو جواب دینا ضروری ہے - ذمہ دار ویب ڈیزائن کے طور پر جانا جاتا نقطہ نظر.
چونکہ آپ کی ویب سائٹ کی ترتیب میں تبدیلی اور مختلف سکرین کے سائز کے ساتھ ترازو ہے، لہذا ان پس منظر کی تصاویر کو بھی اس کے سائز کا اندازہ ہونا چاہیے.
اصل میں، یہ "سیال تصاویر" ذمہ دار ویب سائٹس کے اہم ٹکڑوں میں سے ایک ہیں (ایک سیال گرڈ اور میڈیا کے سوالات کے ساتھ). ان تین ٹکڑے ٹکڑے شروع کے بعد سے ذمہ دار ویب ڈیزائن کا ایکسل بن گیا ہے، لیکن یہ ہمیشہ ذمہ دار ان لائن تصاویر کسی سائٹ پر شامل کرنے کے لئے ہمیشہ آسان ہے (ان لائن تصاویر گرافکس ہیں جو ایچ ٹی ایم ایل مارک اپ کے حصے کے طور پر کوڈت ہیں) اسی طرح پس منظر کی تصاویر (جس میں سی ایس ایس پس منظر کی خصوصیات کا استعمال کرتے ہوئے صفحے میں سجیلا ہوتا ہے) نے بہت سے ویب ڈیزائنرز اور سامنے کے آخر میں ڈویلپرز کو ایک اہم چیلنج فراہم کیا ہے. شکر ہے، سی ایس ایس میں "پس منظر کے سائز" کی جائیداد کے علاوہ یہ ممکن ہے.
ایک علیحدہ مضمون میں، میں نے ونڈو میں فٹ ہونے کے لئے تصاویر کو بڑھانے کے لئے CSS3 پراپرٹی پس منظر کا سائز استعمال کرنے کا احاطہ کرتا تھا، لیکن اس پراپرٹی کے لئے تعیناتی کرنے کے لئے بھی ایک بہتر، زیادہ مفید طریقہ ہے. ایسا کرنے کے لئے، ہم مندرجہ ذیل جائیداد اور قیمت کا مجموعہ استعمال کریں گے:
پس منظر کا سائز: کور؛
پوشیدہ مطلوبہ الفاظ کی جائیداد نے براؤزر کو ونڈو کو فٹ کرنے کے لئے تصویر کو پیمانے کے لئے بتاتا ہے، قطع نظر یہ کہ ونڈو کیسے بڑی ہو یا چھوٹا ہو. پورے اسکرین کو پورا کرنے کے لئے تصویر کو طول کیا جاتا ہے، لیکن اصل تناسب اور پہلو تناسب برقرار رکھا جاتا ہے، جس میں تصویری ہونے سے تصویر خود کو روکتی ہے.
اس تصویر کو کھڑکی میں رکھی جاسکتی ہے جسے بڑے پیمانے پر ممکن ہو تاکہ پوری ونڈو کی سطح کا احاطہ کیا جاسکے. اس کا مطلب یہ ہے کہ آپ کو آپ کے صفحے یا تصویر پر کوئی مسخ نہیں ہے، لیکن اس کا مطلب ہے کہ کچھ تصویر اسکرین کے پہلو تناسب اور سوال میں تصویر پر منحصر ہے. مثال کے طور پر، تصویر کی کناروں (یا تو اوپر، نیچے، بائیں، یا دائیں) تصاویر پر کاٹ کر جا سکتا ہے، اس پر منحصر ہے کہ پس منظر کی پوزیشن کی جائیداد کے لۓ آپ کے کونسے اقدار استعمال کرتے ہیں. اگر آپ "سب سے اوپر بائیں" کے پس منظر پر مبنی ہوتے ہیں، تو تصویر پر کوئی اضافی نیچے اور دائیں طرف آ جائے گا. اگر آپ پس منظر کی تصویر کا مرکز بناتے ہیں تو، تمام پہلوؤں سے کہیں زیادہ آ جائیں گے، لیکن اس سے زیادہ اضافے کے بعد، کسی بھی طرف سے اثر کم خدمت ہو جائے گا.
پس منظر کا سائز کیسے استعمال کریں: کور؛
اپنی پس منظر کی تصویر کو تشکیل دیتے وقت، یہ ایک عمدہ تصویر ہے جو ایک بڑی تصویر ہے جس میں کافی بڑی ہے. جب براؤزر بصری معیار پر کسی اثر انداز کے بغیر کسی تصویر کو کم کرسکتے ہیں، جب براؤزر اصل سائز کے مقابلے میں بڑے پیمانے پر کسی تصویر کو بڑے پیمانے پر ترازو کرتی ہے، بصری معیار کو خراب کیا جاسکتا ہے، بطور اور pixelated بن جائے گا. اس کے برعکس یہ ہے کہ جب آپ تمام اسکرینوں کو بڑی تصاویر فراہم کررہے ہیں تو آپ کا صفحہ ایک کارکردگی کا شکار ہوتا ہے.
جب آپ ایسا کرتے ہیں، تو اس بات کا یقین کریں کہ ان تصاویر کو رفتار اور ویب ڈلیوری ڈاؤن لوڈ کرنے کے لئے تیار کریں . آخر میں، آپ کو کافی کافی تصویر کا سائز اور معیار اور ڈاؤن لوڈ کی رفتار کے لئے مناسب فائل سائز کے درمیان خوش درمیانے تلاش کرنے کی ضرورت ہے.
اسکریننگ پس منظر کی تصاویر کو استعمال کرنے کے عام طریقوں میں سے ایک یہ ہے جب آپ چاہتے ہیں کہ اس صفحے کو کسی صفحے کے مکمل پس منظر میں لے جایا جائے، چاہے وہ صفحہ وسیع ہے اور ڈیسک ٹاپ کمپیوٹر پر دیکھا جائے یا بہت چھوٹا اور ہینڈ ہیلڈ، موبائل پر بھیجا جا رہا ہے. آلات.
اپنی تصویر کو اپنی ویب میزبان پر اپ لوڈ کریں اور پس منظر کی تصویر کے طور پر اپنے سی ایس ایس میں شامل کریں.
پس منظر کی تصویر: url (آتش بازی - over-wdw.jpg)؛
پس منظر دوبارہ: کوئی دوبارہ نہیں؛
پس منظر کی حیثیت: مرکز مرکز؛
پس منظر سے منسلک: مقررہ؛
سب سے پہلے براؤزر پہلے سے موجود براؤزر شامل کریں:
ویب پس منظر کے سائز: کور؛
مووم پس منظر کا سائز: کور؛
پس منظر کا سائز: کور؛
پھر سی ایس ایس پراپرٹی شامل کریں:
پس منظر کا سائز: کور؛
سوٹ ویرنگ آلات کی مختلف تصاویر کا استعمال کرتے ہوئے
جبکہ ڈیسک ٹاپ یا ایک لیپ ٹاپ کے تجربے کے لئے ذمہ دار ڈیزائن اہم ہے، ویب تک رسائی حاصل کرنے والے مختلف قسم کے آلات نمایاں طور پر بڑھ چکے ہیں، اور اس کے ساتھ اس سے زیادہ اسکرین کے سائز کی ایک بڑی قسم ہوتی ہے.
جیسا کہ پہلے ذکر کیا گیا ہے، ایک اسمارٹ فون پر ایک بہت بڑا ذمہ دار پس منظر کی تصویر لوڈ کرنا، مثال کے طور پر، موثر یا بینڈوڈتھ ہوشیار ڈیزائن نہیں ہے.
جانیں کہ آپ ذرائع ابلاغ کے سوالات کا استعمال کس طرح کرسکتے ہیں کہ تصاویر کی خدمت کریں جو آلات کے لئے موزوں ہوں گے، وہ موبائل ڈیوائس کے ساتھ آپ کی ویب سائٹ کی مطابقت کو بہتر بنانے اور بہتر بنانے میں مدد دیں گے.
جینفرئر کرینن کی طرف سے اصل مضمون. جیریمی Girard کی طرف سے ترمیم 9/12/17