ویژگی height <img> HTML
تعریف و استفاده
ارتفاع ویژگی تعیین می‌کند ارتفاع تصویر به صورت پیکسل.
توضیح:لطفاً همیشه برای تصویر ارتفاع و ویژگی widthاگر ارتفاع و عرض تنظیم شده باشد، فضای مورد نیاز برای تصویر در هنگام بارگذاری صفحه رزرو خواهد شد. برعکس، اگر این ویژگی‌ها وجود نداشته باشد، مرورگر نمی‌داند اندازه تصویر چیست و نمی‌تواند فضای مناسب برای آن رزرو کند. این امر باعث تغییر در布局 صفحه در طول بارگذاری (هنگام بارگذاری تصویر) می‌شود.
توضیح:استفاده از ارتفاع و عرض تنظیم اندازه تصویر کوچکتر مجبور می‌کند کاربران تصویر بزرگ را دانلود کنند (حتی اگر در صفحه بسیار کوچک به نظر برسد). برای جلوگیری از این موضوع، قبل از استفاده از تصویر در صفحه، از نرم‌افزار پردازش تصویر برای تغییر اندازه آن استفاده کنید.
مطالعه‌های بیشتر:شرح جزئی از attributeهای height و width
مثال
یک تصویر با ارتفاع 600 پیکسل و عرض 500 پیکسل:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
نحوه استفاده
<img height="پیکسل‌ها">
مقدار attribute
| مقدار | توضیح |
|---|---|
| پیکسل‌ها | ارتفاع تصویر را به پیکسل تعیین کنید (مثلاً height="100"). |
مثال‌های بیشتر
تغییر اندازه تصویر - ساخت تصاویر پرکننده
width و height attribute یک ویژگی پنهان دارند، اینکه نیازی به指定 اندازه واقعی تصویر نیست، یعنی این دو مقدار می‌توانند بزرگتر یا کوچکتر از اندازه واقعی باشند. مرورگر به طور خودکار تصویر را تنظیم خواهد کرد تا با اندازه پیش‌بینی شده سازگار باشد. با استفاده از این روش می‌توان به راحتی تصاویر کوچک را بزرگتر کرد و تصاویر بزرگ را کوچکتر کرد. اما باید توجه داشت که: مرورگر همچنان باید کل فایل را دانلود کند، حتی اگر اندازه نهایی آن در صفحه بسیار کوچک باشد و اگر نسبت ارتفاع به عرض اصلی حفظ نشود، تصویر دچار انحراف خواهد شد.
یک حقه دیگر برای استفاده از width و height attribute این است که می‌توان به راحتی یک منطقه از صفحه را پر کرد و همچنین عملکرد مستند را بهبود بخشید. تصور کنید که می‌خواهید یک نوار رنگی در مستند خود قرار دهید. شما نیازی به ایجاد یک تصویر با اندازه کامل ندارید، بلکه فقط باید یک تصویر با عرض و ارتفاع یک پیکسل ایجاد کنید و رنگی که می‌خواهید را به آن اختصاص دهید. سپس از width و height attribute آن را به اندازه بزرگتر توسعه دهید.
<img src="/i/ct_1px.gif"}} width="200px" height="30px" />
این اثر HTML بالا است، این نوار رنگی با استفاده از یک تصویر یک پیکسلی ساخته شده است:
استفاده از مقادیر درصدی
یک حقه آخر برای استفاده از width attribute این است که از مقادیر درصدی به جای مقادیر پیکسلی استفاده کنید. این کار باعث می‌شود مرورگر تصویر را به نسبت با اندازه پنجره نمایشگر خود تغییر دهد. بنابراین، برای ایجاد یک نوار افقی رنگی با عرضی مشابه با عرض پنجره نمایشگر و ارتفاع 30 پیکسل، می‌توانید به این صورت عمل کنید:
<img src="/i/ct_1px.gif"}} width="60%" height="30px" />
وقتی اندازه پنجره مستند تغییر می‌کند، اندازه این تصویر نیز تغییر خواهد کرد:
توضیح:اگر یک مقدار width به صورت درصدی ارائه شده و height نادیده گرفته شده باشد، خواه بزرگتر یا کوچکتر شود، مرورگر از نسبت ارتفاع به عرض تصویر حفظ خواهد کرد. این به این معناست که نسبت ارتفاع به عرض تصویر تغییر نخواهد کرد و تصویر دچار انحراف نخواهد شد.
لطفاً به HTML زیر نگاه کنید:
<img src="/i/ct_1px.gif"}} width="20%" />
به این معنی که اگر تنها width属性 تصویر ct_1px.gif را به صورت درصد تنظیم کنید، یک تصویر مستطیلی خواهید گرفت (این دلیل آن است که ct_1px.gif یک مستطیل با عرض و ارتفاع 1 پیکسل است):
توضیح:هدف ما از ارائه مثال‌های بالا این است که شما بهتر بتوانید استفاده از attributeهای height و width را درک کنید. اگر شما تنها نیاز به یک بخش بزرگ از رنگ یکدست برای تزئین صفحه دارید، بهتر است کهاستفاده از CSS برای ایجاد رنگ پس‌زمینه.
شرح جزئی از attributeهای height و width
چرا باید از属性های height و width استفاده کنیم
آیا شما دیده‌اید که محتوای مستند در حال بارگذاری به صورت نامنظم حرکت می‌کند؟ دلیل این است که مرورگر برای نمایش هر یک از تصاویر بارگذاری شده، مدام چارچوب صفحه را تنظیم می‌کند. مرورگر با دانلود و تحلیل عرض و ارتفاع تصویر، اندازه تصویر را تعیین می‌کند و سپس یک فضای مستطیل معادل در پنجره نمایش قرار می‌دهد. سپس مرورگر چارچوب نمایش صفحه را تنظیم می‌کند تا تصویر را در آن قرار دهد. این موضوع همچنین به ما نشان می‌دهد که تصاویر مستقل هستند و به طور جداگانه از فایل‌های منبع بارگذاری می‌شوند.
اما این روشی نیست که برای نمایش مستندات مؤثرترین باشد، زیرا مرورگر قبل از نمایش محتوای همسایه و بعدی مستند، باید هر یک از فایل‌های تصویری را بررسی کند و فضای نمایش آنها را محاسبه کند. این ممکن است باعث تأخیر بسیار زیادی در نمایش مستند شود و خواندن کاربر را مختل کند.
برای سازندگان، روشی مؤثرتر این است که از属性های height و width برچسب <img> برای مشخص کردن اندازه تصویر استفاده کنند. در این صورت، مرورگر قبل از دانلود تصویر برای آن فضایی را رزرو می‌کند، که می‌تواند نمایش مستند را سریع‌تر کند و جلوگیری از حرکت محتوای مستند را به همراه دارد. هر دو این属性 باید اعداد صحیحی باشند و اندازه تصویر را به صورت پیکسل نشان دهند. ترتیب ظهور این دو属性 در برچسب <img> مهم نیست.
مشکلات属性های height و width
با اینکه属性های height و width برچسب <img> می‌توانند عملکرد را بهبود بخشند و به شما اجازه می‌دهند برخی ترفندهای کوچک را پیاده‌سازی کنید، اما در استفاده از آنها مشکلات منفی پیچیده‌ای وجود دارد. حتی اگر کاربران امکان دانلود خودکار تصاویر را غیرفعال کرده باشند، مرورگر همچنان باید فضای اختصاص داده شده برای تصاویر را با اندازه مشخص شده نمایش دهد. معمولاً این فضای خالی برای خواننده یک چارچوب خالی است که یک آیکون بی‌معنی در آن قرار دارد، نشان‌دهنده مکان قرارگیری تصویر است. در این حالت صفحه به نظر می‌رسد بسیار بد است، مانند اینکه اصلاً تکمیل نشده است و بیشتر محتوا بی‌فایده است. اگر از اندازه مشخص شده استفاده نشود، مرورگر فقط یک آیکون تصویر را در متون قرار می‌دهد، که حداقل می‌توان از آن چندین متن خواند.
برای این سوال ما هنوز راه‌حلی نداریم، اما می‌خواهیم تأکید کنیم که از استفاده کنید ویژگی alt و بامتن توصیفیاینطور که به نظر می‌رسد، خواننده حداقل می‌داند چه چیزی در اینجا کم است. ما همچنان توصیه می‌کنیم از این اندازه‌گیری‌ها استفاده کنید، زیرا ما از هر رفتاری که می‌تواند عملکرد شبکه را بهبود بخشد، حمایت می‌کنیم.
پشتیبانی از مرورگر
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی | پشتیبانی |
