ویژگی height HTML <img>

HTML <img> تیگ

تعریف و استفاده

height ویژگی که ارتفاع تصویر را به پیکسل تعیین می‌کند.

提示：لطفاً همیشه برای تصویر مشخص کنید height اور ویژگی widthاگر ارتفاع و عرض تنظیم شده باشد، فضای مورد نیاز برای تصویر در هنگام بارگذاری صفحه رزرو خواهد شد. در غیر این صورت، اگر این ویژگی‌ها وجود نداشته باشد، مرورگر نمی‌داند اندازه تصویر چیست و نمی‌تواند فضای مناسب برای آن رزرو کند. این امر منجر به تغییر در قالب صفحه در طول بارگذاری (هنگام بارگذاری تصویر) خواهد شد.

提示：استخدام height اور width بڑی تصویر کو چھوٹی تصویر میں تبدیل کرنا، تصویر کو چھوٹی دکھائی دیئے جانے کے باوجود بڑی تصویر ڈاؤن لوڈ کی جائے گی (تقریباً چھوٹی دکھائی دیئے جانے کی طرح). تاکہ اس صورت کو روکنا، تصویر کو پہلے اپنے اندر تصویر کا سائز بدل دینے والی سافٹ ویئر کا استعمال کریں.

مزید پڑھیں:详解 height 和 width 属性

مثال

600 پائیکسل کی اونچائی، 500 پائیکسل کی عرض کا تصویر:

<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

亲自试一试

نحوی

<img height="پائیکسلس">

ویژگی کا مقدار

مقدار شرح
پائیکسلس تصویر کی اونچائی، پیکسل میں انداز (مثلاً height="100")

مزید مثال

تصویر کی سائز بدل دینا - پر فیلنگ تصویر بنانا

height اور width کی خاصیت کا ایک چھوٹی خاصیت یہ ہے کہ لوگ تصویر کی صحیح سائز کا تعین نا کرتے ہیں، یعنی یہ دو خاصیت صحیح سائز کے نال کچھ بھی بڑی یا چھوٹی کی جاسکتی ہیں۔ براوزر تصویر کو خود بخود سائز بدل دے گا، تاکہ یہ اس ریزرو کی جگہ کی سائز کے مطابق سائز بدل جائے گا۔ اس طریقے سے آپ بہت آسانی سے بڑی تصاویر کی چھوٹی تصاویر بناسکتے ہیں اور چھوٹی تصاویر کو بڑھاسکتے ہیں، لیکن دیکھیں کہ براوزر پورا فائل ڈاؤن لوڈ کرتا ہے، بغیر کسی بھی اترنے کا اثر، اور اگر اس کا تناسب عرض اور طول رکھا نہ جائے تو تصویر منگیل ہوگا。

height اور width کی خاصیت کا ایک دوسرا حیلہ یہ ہے کہ آپ بہت آسانی سے صفحے کی کسی علاقے کو پر کرسکتے ہیں اور اس کے ساتھ ساتھ سند کی کارکردگی کو بھی بہتر بناسکتے ہیں۔ تصور کریں کہ اگر آپ کسی سند میں ایک رنگا دار پینل رکھنا چاہتے ہیں تو آپ کو ایک پورا سائز کا تصویر بنانا ناچا نہیں ہوگا، بلکہ آپ کو صرف ایک پیکسل کی عرض اور اونچائی والا تصویر بنایا اور آپ کی چاہئیہ رنگ کو اس پر رکھ دیں تو اس کا استعمال کریں اور اس کو height اور width کی خاصیت کے ذریعے بڑا سائز میں بڑھائیں۔

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

یہ نیچے کا HTML کا اثر ہے، یہ رنگا دار پینل ایک صرف پیکسل کا تصویر سے بنایا گیا ہے:

فیصد کی کی جگہ میں استعمال کریں

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

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

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

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

کریپت آپ نکا دیکھئے نیچے HTML:

width="20%" />

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


亲自试一试

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

详解 height 和 width 属性

为什么要使用 height 和 width 属性

您是否见过当文档加载时其内容会显示不规律的移动。之所以会这样，是因为浏览器为了能够显示每一个加载的图像，而不断地重新调整页面的布局。浏览器通过下载并解析出图像的宽度和高度来决定图像的大小，然后就会在显示窗口中留出一个相应的矩形空间。然后浏览器就会调整页面的显示布局，以便把图像插入到显示当中。这同时也告诉我们，图像是独立的文件，它与源文件都分别是独立加载的。

但是这不是一种最有效的显示文档的方法，因为浏览器在显示相邻的以及后面的文档内容之前，必须要检查每一个图像文件，并计算它们的屏幕空间。这可能会给文档的显示带来非常大的延迟，从而打断用户的阅读。

对于创作者来说，一种更为有效的方法是通过 标签的 height 和 width 属性来指定图像的尺寸。这样的话，浏览器在下载图像之前就为其预留出了位置，从而可以加速文档的显示，还可以避免文档内容的移动。这两个属性都要求是整数值，并以像素为单位来表示图像尺寸。这两个属性在 标签中出现的次序并不重要。

height 和 width 属性的问题

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

اس سوال کے لئے ہم کسی حل نہیں پائے ہیں، صرف ایک نکاتی کا ذکر کریں، یعنی آپ استعمال کریں alt خاصیت اورمقصددار لفظ، تاکہ خونشین کم از کم جانتا ہو کہ یہاں کیا چھپا نہیں ہے۔ ہم اپنے مشورے پر قائم ہیں کہ آپ یہ سائز خاصیت استعمال کریں، کیونکہ ہم نیٹ ورک کی کارکردگی کو بہتر بنانے والی سبھی کارروائیوں کو حوصلہ دیتے ہیں۔

بھرستار کا استعمال

کروم ایج فائرفاکس سافری آپریا
کروم ایج فائرفاکس سافری آپریا
مدد مدد مدد مدد مدد

HTML <img> تیگ