HTML img تگ کی height اور width پراپرٹی

HTML <img> ਟੈਗ

مثال

تصویر کی چوڑائی اور اونچائی کو 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 کی اچھی خاصیت کا استعمال کیا کریئن بڑا کردیجئے۔

width="200px" height="30px" />

یہ واضح نمائش یہی ہوگی، یہ رنگی پٹری صرف ایک پیکسل کی تصویر سے بنی ہوئی ہے:

فیصدی اقدار کا استعمال

width کی اچھی خاصیت کا استعمال کیا جانا یہ ہے کہ فیصدی اقدار کو استعمال کیا جائے اور نئی لکڑی کا استعمال کیا جائے، جس سے براوزر تصویر کو براوزر کی نمائش ونڈو کی کچھ تناسب میں چھوٹ یا بڑا کردیگا۔ اس لئے اگر آپ کو ایک چوڑائی کا برابر نمائش ونڈو کا اونچائی کا 30 پیکسل کا رنگی پٹری بنانا ہے تو اس کا استعمال کیا جاسکتا ہے:

width="60%" height="30px" />

جب دکومن ونڈو کا سائز بدل جائے تو اس کی تصویر کا سائز بھی بدل جائے گا:

提示：اگر ایک فیصدی طرح کا width کا اقدار فراہم کیا گیا اور height کو نظر انداز رکھا گیا تو بغیر کسی بھی وسیع یا چھوٹی کئے جانے کی صورت میں، براوزر تصویر کا تناسب کا اطمینان فراہم کرے گا۔ یہ معنیات یہ ہوگا کہ تصویر کی اونچائی اور چوڑائی کا تناسب بدل نہیں سکتا، تصویر کچھ نہیں بدل سکتا۔

请看下面的 HTML：

width="20%" />

也就是说，如果只设置图像 ct_1px.gif 的 width 属性的百分比值，会得到一个矩形图像（这是因为原始的 ct_1px.gif 就是一个只有 1px 宽和高的矩形）：

提示：您可以在我们的在线测试工具中亲自试一试！

提示：我们提供以上例子的目的是为了使您更好地理解 height 和 width 属性的用法。如果您只是需要大面积的纯色块来装饰页面，那么更好的办法是使用 CSS 来创建背景色。

浏览器支持

ਸਾਰੇ ਬਰਾਉਜ਼ਰਾਂ ਨੇ height ਅਤੇ width ਪ੍ਰਤੀਯੋਗੀਆਂ ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ。

ਸਕ੍ਰਿਪਟ

<img height="value" />

ਜਾਂ ਵੀ:

<img width="value" />

ਪ੍ਰਤੀਯੋਗੀ ਮੁੱਲ

ਮੁੱਲ ਵਰਣਨ
pixels ਪਿਕਸਲ ਇਕਾਈ ਵਿੱਚ ਉਚਾਈ ਜਾਂ ਚੌਡਾਈ ਦਾ ਮੁੱਲ
percent ਅੰਦਰਲੇ ਤੱਤ ਦੇ ਪ੍ਰਤੀਸ਼ਤ ਨਾਲ ਉਚਾਈ ਜਾਂ ਚੌਡਾਈ ਦਾ ਮੁੱਲ

TIY ਉਦਾਹਰਣ

ਚਿੰਨ੍ਹ ਦਾ ਅਕਾਰ ਬਦਲਣਾ
ਇਸ ਉਦਾਹਰਣ ਵਿੱਚ ਚਿੰਨ੍ਹ ਨੂੰ ਵੱਖੋ-ਵੱਖ ਅਕਾਰਾਂ ਵਿੱਚ ਕਿਵੇਂ ਬਦਲਿਆ ਜਾ ਸਕਦਾ ਹੈ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ ਦਿੱਤਾ ਗਿਆ ਹੈ。

height ਅਤੇ width ਪ੍ਰਤੀਯੋਗੀਆਂ ਦੀ ਵਿਸਥਾਰਿਤ ਪਰਿਭਾਸ਼ਾ

ਕਿਉਂ height ਅਤੇ width ਪ੍ਰਤੀਯੋਗੀਆਂ ਦਾ ਉਪਯੋਗ ਕਰਨਾ?

ਕੀ ਤੁਸੀਂ ਦੇਖਿਆ ਹੈ ਕਿ ਜਦੋਂ ਦਸਤਾਵੇਜ਼ ਲੋਡ ਹੋ ਰਿਹਾ ਹੈ ਤਾਂ ਉਸ ਦਾ ਸਮੱਗਰੀ ਅਸਥਿਰ ਤਰੀਕੇ ਨਾਲ ਪ੍ਰਦਰਸ਼ਿਤ ਹੁੰਦਾ ਹੈ। ਇਹ ਕਾਰਨ ਇਹ ਹੈ ਕਿ ਬਰਾਉਜ਼ਰ ਨੂੰ ਹਰ ਲੋਡ ਹੋਣ ਵਾਲੇ ਚਿੰਨ੍ਹ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ, ਪੰਜੀਕਰਣ ਪੇਜ ਦੇ ਬਾਨਾਮ ਵਿੱਚ ਬਦਲਦਾ ਰਹਿੰਦਾ ਹੈ। ਬਰਾਉਜ਼ਰ ਚਿੰਨ੍ਹ ਦੇ ਚੌਡਾਈ ਅਤੇ ਉਚਾਈ ਨੂੰ ਲੋਡ ਕਰਕੇ ਤੇ ਪਰਿਭਾਸ਼ਿਤ ਕਰਦਾ ਹੈ, ਤਾਂ ਹੀ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਇੱਕ ਉਚਿਤ ਚੌਰਾਹੀ ਸਥਾਨ ਰਾਖਵਾਂ ਕਰਦਾ ਹੈ। ਤਦ ਬਰਾਉਜ਼ਰ ਪੰਜੀਕਰਣ ਪੇਜ ਦੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਦਲਦਾ ਰਹਿੰਦਾ ਹੈ, ਤਾਂ ਕਿ ਚਿੰਨ੍ਹ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕੇ। ਇਹ ਵੀ ਸਾਨੂੰ ਇਹ ਦੱਸਦਾ ਹੈ ਕਿ ਚਿੰਨ੍ਹ ਅਜਿਹੇ ਸਿੱਧੇ ਫਾਈਲ ਹਨ, ਜੋ ਕਿ ਸਰੋਤ ਫਾਈਲ ਨਾਲ ਵੱਖਰੇ ਤਰੀਕੇ ਨਾਲ ਲੋਡ ਹੁੰਦੇ ਹਨ。

ਪਰ ਇਹ ਸਭ ਤੋਂ ਪ੍ਰਭਾਵੀ ਪ੍ਰਦਰਸ਼ਨ ਦਸਤਾਵੇਜ਼ ਦਾ ਤਰੀਕਾ ਨਹੀਂ ਹੈ, ਕਿਉਂਕਿ ਬਰਾਉਜ਼ਰ ਨੂੰ ਨਾਲ ਲਗਾਤਾਰ ਅਤੇ ਬਾਅਦ ਦੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਹਰ ਚਿੰਨ੍ਹ ਫਾਈਲ ਨੂੰ ਚੈੱਕ ਕਰਨਾ ਪੈਂਦਾ ਹੈ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਸਕਰੀਨ ਸਪੇਸ ਨੂੰ ਗਿਣਤੀ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਦਸਤਾਵੇਜ਼ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਵਿੱਚ ਬਹੁਤ ਵੱਡੀ ਦੇਰੀ ਲਿਆ ਸਕਦੀ ਹੈ, ਜਿਸ ਨਾਲ ਪ੍ਰਯੋਗਕਰਤਾ ਦੀ ਪੜ੍ਹਾਈ ਨੂੰ ਰੋਕ ਸਕਦੀ ਹੈ。

ਲੇਖਕਾਂ ਲਈ, ਇੱਕ ਜ਼ਿਆਦਾ ਪ੍ਰਭਾਵੀ ਤਰੀਕਾ <img> ਟੈਗ ਦੇ height ਅਤੇ width ਪ੍ਰਤੀਯੋਗੀਆਂ ਰਾਹੀਂ ਚਿੰਨ੍ਹ ਦਾ ਅਕਾਰ ਨਿਰਧਾਰਿਤ ਕਰਨਾ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਬਰਾਉਜ਼ਰ ਚਿੰਨ੍ਹ ਨੂੰ ਡਾਊਨਲੋਡ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸ ਦਾ ਸਥਾਨ ਰਾਖਵਾਂ ਕਰਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਦਸਤਾਵੇਜ਼ ਦੀ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਤੇਜ਼ ਕਰ ਸਕਦਾ ਹੈ, ਅਤੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਸਮੱਗਰੀ ਦੀ ਸ਼ਿਫਟਿੰਗ ਨੂੰ ਰੋਕ ਸਕਦਾ ਹੈ। ਇਹ ਦੋਵੇਂ ਪ੍ਰਤੀਯੋਗੀਆਂ ਸਾਰੇ ਪੂਰਣ ਮੁੱਲਾਂ ਹੁੰਦੇ ਹਨ ਅਤੇ ਪਿਕਸਲ ਇਕਾਈ ਵਿੱਚ ਚਿੰਨ੍ਹ ਦਾ ਅਕਾਰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦੇ ਹਨ। ਇਹ ਦੋਵੇਂ ਪ੍ਰਤੀਯੋਗੀਆਂ <img> ਟੈਗ ਵਿੱਚ ਆਉਣ ਵਾਲੀ ਕਿਸਮ ਦੀ ਅਹਿਮੀਅਤ ਨਹੀਂ ਰੱਖਦੇ।

height 和 width 属性的问题

虽然 标签的 height 和 width 属性能够改善性能并让你实现一些小技巧，但在使用它们时还是有一些棘手的负面效果。即使用户已经关掉了自动下载图像的功能，浏览器还是要把为图像预留的空间以指定的尺寸显示出来。而这样留给读者的通常是一个空的框架，里面有一个毫无意义的图标，表示这是放置图像的位置。这时页面将看上去非常糟糕，就像根本没有完成一样，并且大部分内容都毫无用处。如果不用这些指定的尺寸，则浏览器将只是在文本中放置一个图像图标，这样显示中至少还有一些文字可以阅读。

ਇਸ ਪ੍ਰਸ਼ਨ ਲਈ ਅਸੀਂ ਹੁਣ ਤੱਕ ਕੋਈ ਹੱਲ ਨਹੀਂ ਪਾਇਆ ਹੈ, ਇਹ ਕੇਵਲ ਉਸ ਨੂੰ ਜ਼ਿਕਰ ਕਰਨਾ ਹੈ ਕਿ ਤੁਸੀਂ alt ਵਿਸ਼ੇਸ਼ਤਾਅਤੇਵਰਣਨਕਾਰੀ ਲਿਖਤਇਸ ਤਰ੍ਹਾਂ ਪੜ੍ਹਨ ਵਾਲੇ ਕਿਰਦ ਕਿਸੇ ਵੀ ਚੀਜ਼ ਦੀ ਕਮੀ ਨੂੰ ਪਤਾ ਕਰ ਸਕਦੇ ਹਨ।ਅਸੀਂ ਤੁਹਾਨੂੰ ਇਹ ਸੁਝਾਵਾ ਦਿੰਦੇ ਹਾਂ ਕਿ ਤੁਸੀਂ ਇਹ ਮਾਪ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਰਤੋਂ ਕਰੋ, ਕਿਉਂਕਿ ਅਸੀਂ ਨੈੱਟਵਰਕ ਕਾਰਗੁਜਾਰੀ ਵਿੱਚ ਸੁਧਾਰ ਵਾਲੇ ਕਿਸੇ ਵੀ ਵਿਵਹਾਰ ਨੂੰ ਪ੍ਰੋਤਸਾਹਨ ਦਿੰਦੇ ਹਾਂ。

HTML <img> ਟੈਗ