HTML <img> نماد کا height اور width نمائشات
مثال
تصویر کی چوڑائی اور اونچائی کو 200 پیکسل میں ترتیب دیں:
<img src="/i/mouse.jpg" height="200" width="200" />
تعریف اور استعمال
نماد <img> کا height اور width نمائشات کی تنظیم کرتا ہے.
نکات:تصویر کی height اور width کی خاصیت کو طے کرنا اچھی عادت ہے۔ اگر یہ خاصیت طے کی جائی تو آپ کو تصویر کی سائز کا ریزرو کیا جاسکتا ہے جب صفحہ لوڈ ہوتا ہے، اگر یہ خاصیت نہیں طے کی جائی تو براوزر تصویر کی سائز کو نہیں جانتا، لہذا تصویر لوڈ ہونے کے وقت صفحے کا تیار بچار نا بچار تبدیل ہو جاتا ہے (ایسا ویار وضاحت میں کیا گیا ہے)۔
نکات:height اور width کی خاصیت کے ذریعے تصویر کو نہیں سائز بدلنا چاہئے۔ اگر height اور width کی خاصیت کے ذریعے تصویر کو چھوٹا کیا جائے تو استعمال کرنے والوں کو بڑی مقدار میں تصویر ڈاؤن لوڈ کرنا پڑتا ہوگا، جو کہ صفحے پر بہت چھوٹا نظر آتا ہوگا۔ صحیح طریقہ یہ ہے کہ آپ کو اس کا تصویر پہلے سے ہی صفحے پر استعمال کرنے سے پہلے، اس کی سائز کو مناسب سافٹ ویئر کے ذریعے تیار کرنا چاہئے۔
تعمیق مطالعه:height اور width پرزنٹیشنز کی تفصیلات
مزید مثال
تصویر کی سائز بدلنا - پُر کنارے والی تصویر بنانا
height اور width کی خاصیت کا ایک پوشیدہ خاصیت یہ ہے کہ لوگ تصویر کی حقیقی سائز کو نہیں دیکھتے، یعنی، یہ دو مقادیر حقیقی انداز کے ساتھ نہیں آتے یا چھوٹی آتے، براوزر خودکار طور پر تصویر کو سائز میں تیار کرتا ہے تاکہ یہ اس ریزرو کی سائز کی وجہ سے تیار ہو جائے۔ اس طریقے سے آپ کو بہت آسانی سے بڑی تصویر کی تھمبل (تصویر کا چھوٹا نمونہ) بنایا جاسکتا ہے اور بہت چھوٹی تصویر کو بڑا کیا جاسکتا ہے، لیکن دقت رکھنا چاہئے کہ براوزر پورا فائل ڈاؤن لوڈ کرتا ہے، خواہ اس کا نمائش والا سائز کتنا بھی چھوٹا ہو، اور اگر اس کا تناسب نہیں رکھا جائے تو تصویر منحرف ہو جائے گا۔
height اور width کی خاصیت کا ایک دوسرا تکنیک یہ ہے کہ آپ کی پہلے پہلے صفحے کی کسی علاقے کو بھر سکتے ہیں، اور اس کے ساتھ ساتھ ڈاکومن کی کارکردگی کو بھی بہتر کرسکتے ہیں۔ تصور کریں کہ آپ ڈاکومن میں ایک رنگی افقی باریک چٹی رکھنا چاہتے ہیں۔ آپ کو پورے انداز کا تصویر بنانے کا کام نہیں کرنا پڑتا، بجائی میں آپ کو صرف ایک پائیکسلو کی چوڑائی اور اونچائی کا تصویر بنایا جائے اور آپ کی چاہئیہ رنگ کو اس پر رکھا جائے، بعد میں آپ اس کو height اور width کی خاصیت کے ذریعے بڑا سائز میں پچھا جائے اور اس کو استعمال کیا جائے。
<img src="/i/ct_1px.gif" width="200px" height="30px" />
یہ بالا HTML کا اثر ہے، یہ رنگی چٹی ایک پائیکسلو کی تصویر سے بنی ہوئی ہے:
فیصدی کا مقادیر استعمال کیا جائے
width کی خاصیت کا آخری تکنیک یہ ہے کہ فیصدی کا مقادیر استعمال کیا جائے اور نہ کہ پیکسلو کا مقادیر استعمال کیا جائے۔ یہ کا مطلب یہ ہوگا کہ براوزر تصویر کو اس کا نمائش والی ونڈو کا تناسب کے مطابق سائز میں چھوپا دا گا۔ لہذا اگر آپ کو ایک چوڑائی کا نمائش والی رنگی افقی باریک چٹی بنانے کا کام ہے جس کی اونچائی 30 پائیکسلو ہو، تو اس طرح سے ممکن ہوگا:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
جب کتبہ کا جوائنٹ کا سائز تبدیل ہوتا ہے تو اس کی تصویر کا سائز بھی تبدیل ہوتا ہے:
نکات:اگر ایک فیصدی کا width کا مقادیر دیا گیا ہے اور height کو نظر انداز رکھا گیا ہے تو، خواہ کوئی بھی بڑھاؤ یا چھوٹاؤ کا کام کیا جائے، براوزر تصویر کا تناسب کا تعامل نکالے گا۔ یہ معنیات یہ ہوگا کہ تصویر کی اونچائی اور چوڑائی کا تناسب تبدیل نہیں ہوگا، لہذا تصویر منحرف نہیں ہوگا۔
درج ذیل HTML دیکھیں:}
<img src="/i/ct_1px.gif" width="20%" />
مثلاً اگر آپ صرف تصویر ct_1px.gif کی چوڑائی کا فیصدی مقدار کا width پرزنٹیشنز کو ستیار کریں تو، ایک مربع تصویر ملے گا (یعنی کیونکہ اصل ct_1px.gif 1 پیکسل چوڑا اور اونچا مربع ہے):
نکات:آپ کی آن لائن ٹیسٹنگ آلکائیڈ میںآپ خود سنجیدہ کریں!
نکات:نکات: اگر آپ صرف صفحے کو تزئین کرنے کے لئے بڑے مساحت کا سادے رنگ کا بلاک چاہتے ہیں تو، بہتر طریقہ یہ ہوگاپس منظر کی رنگ کی تعمیر کے لئے CSS کا استعمال。
براؤزر کی پشتیبانی
تمام براؤزرز height اور width پرزنٹیشنز کو پشتیبانی کرتے ہیں۔
قواعد
<img height="مقدار" />
یا:
<img width="مقدار" />
پرزنٹیشنز کا مقدار
| مقدار | وصف |
|---|---|
| پیکسل | پیکسل کا وحدہ کا مقدار |
| فیصد | عناصر کی فیصد کے حساب سے اونچائی یا چوڑائی کا مقدار |
TIY مثال
- تصویر کی سائز بدلنا
- اس مثال میں دیکھیں کہ کس طرح سے تصویر کو مختلف سائز میں لایا جاتا ہے۔
height اور width پرزنٹیشنز کی تفصیلات
height اور width پرزنٹیشنز کا استعمال کیوں کریں؟
آپ کیا دیکھا ہوگا کہ جب ڈاکومن لوڈ ہوتا ہے تو اس کا مطلب کس طرح سے غیر منظم طور پر آجائی ہوتا ہے؟ اس لئے کیونکہ براؤزر، کسی بھی لوڈ ہونے والی تصویر کو نمائش کرنے کے لئے، پینل کی توجہ میں کسار کریگا، تاکہ وہ تصویر کی چوڑائی اور اونچائی کا تعین کرسکے، جس کے بعد براؤزر، پینل کی نمائش میں تیزی سے ترمیم کرتا ہے تاکہ تصویر کو نمائش میں شامل کرسکے۔ اس سے پتہ چل جاتا ہے کہ تصاویر مستقل فائل ہیں اور وہ اس کی منشا فائل سے مستقل طور پر لوڈ ہوتے ہیں۔
لیکن یہ ڈاکومن کی نمائش کا سب سے موثر طریقہ نہیں ہے، کیونکہ براؤزر، کسی بھی متعاقب ڈاکومن کی نمائش سے پہلے، ہر تصویر فائل کو چکا اور اس کی اسکرین سائز کی کیتمی کریگا، جس سے ڈاکومن کی نمائش میں بہت تاخیر آتی ہے اور یہ استعمال کا تجربہ بگاڑ دیتا ہے۔
لایکوں کے لئے، ایک اور موثر طریقہ یہ ہے کہ وہ <img> تگ کی height اور width پرزنٹیشنز کا استعمال کریں تاکہ تصویر کی سائز کا تعین کریں۔ اس طرح سے براؤزر، تصویر ڈاؤن لوڈ سے پہلے اس کا مقام رکھتا ہے، جس سے ڈاکومن کی نمائش میں تیزی آتی ہے اور ڈاکومن کی مطلب کی توجہ پر کسی بھی رکاوٹ نہیں آتی۔ دونوں پرزنٹیشنز کا پتہ لگانا ضروری ہوتا ہے اور وہ پیکسل کا وحدہ کا حامل ہوتی ہیں جو تصویر کی سائز کا تعین کرتا ہے۔ اس پرزنٹیشنز کا ترتیب <img> تگ میں کسی بھی طرح سے اہم نہیں ہوتا۔
height اور width خاصیتوں کا مسئلہ
بھاگ <img> کا height اور width خاصیت بہتر کارائی کو بہتر بناسکتا ہے اور آپ کو کچھ چھوٹی حیلیاں بھی استعمال کی جاسکتی ہیں، لیکن ان کا استعمال کے دوران کچھ مشکلات آتتا ہے۔ یعنی اگر استعمال کی جانے والی تصویر کو خودکار طور پر ڈاؤن لوڈ کروائی جانے کا اختیار استعمال کیا گیا ہو، تاہم براوزر اپنے ذریعے مقرر کردہ سائز کا خالی فضاء دکھاتا ہے۔ یہ طرح خوانندگان کو ایک خالی فریم دکھاتا ہے، جس میں ایک بلاتعاقب نشان آتا ہے، جو تصویر کی جگہ کا نشان دیتا ہے۔ اس طرح وہ صفحہ بہت بدیلا دکھائی دیتا ہے، جیسے اگر وہ پورا نہیں مکمل ہوا ہو، اور زیادہ تر مطلب بیکار رہ جاتا ہے۔ اگر مقرر کردہ سائز کا استعمال نہ کیا جائے تو براوزر صرف متنی میں تصویر کا نشان دکھاتا ہے، جس میں کم از کم کچھ لفظ پڑھا جاسکتا ہے۔
اس سوال کے لئے ہم کو حل نہیں ملتا ہے، صرف یہ کہنا ہوتا ہے کہ alt خاصیتاورتوضیحی لفظ، اس طرح خوانندگان کم از کم جانتا ہو کہ یہاں کیا چھپا نہیں ہے۔ ہم یہاں پر یہیں پر بھی سائز خاصیتوں کا استعمال کی پیشکش کرتے ہیں، کیونکہ ہم نیٹ ورک کارائی کو بہتر بنانے والی تمام کارروائیوں کو حوصلہ دیتے ہیں۔
