ویژگی‌های height و width برچسب <img> در HTML
مثال
باز کردن عرض و ارتفاع تصویر به ترتیب به 200 پیکسل:
<img src="/i/mouse.jpg" height="200" width="200" />
تعریف و استفاده
ویژگی‌های height و width برچسب <img> اندازه تصویر را تنظیم می‌کنند.
توجه:تعیین ویژگی‌های height و width برای تصاویر یک عادت خوب است. اگر این ویژگی‌ها تنظیم شوند، می‌توان فضای لازم برای تصویر را در هنگام بارگذاری صفحه رزرو کرد. اگر این ویژگی‌ها وجود نداشته باشند، مرورگر نمی‌تواند اندازه تصویر را تشخیص دهد و نمی‌تواند فضای مناسب برای آن رزرو کند، بنابراین هنگام بارگذاری تصویر، قرارگیری صفحه تغییر خواهد کرد. (در بخش‌های بعدی این دیدگاه به تفصیل توضیح داده خواهد شد).
توجه:لطفاً از ویژگی‌های height و width برای بزرگنمایی تصاویر استفاده نکنید. اگر از ویژگی‌های height و width برای کوچک‌نمایی تصاویر استفاده شود، کاربر باید تصویر با حجم بالا را دانلود کند (حتی اگر تصویر در صفحه به نظر کوچک باشد). روش صحیح این است که قبل از استفاده از تصویر در وب‌سایت، آن را به سایز مناسب در نرم‌افزار تبدیل کنید.
خواندن ادامه‌ای:شرح attribute 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%" />
به عنوان مثال، اگر فقط ارزش درصد width تصویر ct_1px.gif را تنظیم کنید، یک تصویر مستطیلی خواهید گرفت (این دلیل این است که ct_1px.gif یک مستطیل با عرض و ارتفاع 1 پیکسل است):
توجه:شما می‌توانید از ابزار تست آنلاین ما استفاده کنیدآزمایش کنید!
توجه:هدف ما از ارائه این مثال این است که شما بهتر بتوانید استفاده از attribute height و width را یاد بگیرید. اگر شما فقط نیاز به یک مساحت بزرگ از رنگ یکدست برای تزئین صفحه دارید، بهتر است کهروش ایجاد رنگ پس‌زمینه با استفاده از CSS。
پشتیبانی مرورگر
همه مرورگرها از attribute height و width پشتیبانی می‌کنند.
قوانین
<img height="value" />
یا:
<img width="value" />
ارزش attribute
| ارزش | توضیح |
|---|---|
| pixels | ارزش‌های ارتفاع یا عرض به صورت پیکسل. |
| percent | ارزش‌های ارتفاع یا عرض به صورت درصد شامل عنصر. |
مثال عملی
- تنظیم اندازه تصویر
- این مثال نشان می‌دهد که چگونه می‌توان اندازه تصویر را به اندازه‌های مختلف تنظیم کرد.
شرح attribute height و width
چرا باید از属性 height و width استفاده کرد؟
آیا شما دیده‌اید که هنگام بارگذاری مستند، محتوای آن به صورت نامنظم حرکت می‌کند؟ دلیل این امر این است که مرورگر برای نمایش هر یک از تصاویر بارگذاری شده، مدام ساختار صفحه را تنظیم می‌کند. مرورگر با دانلود و تحلیل عرض و ارتفاع تصویر، اندازه تصویر را تعیین می‌کند و سپس یک فضای مستطیل در پنجره نمایش ایجاد می‌کند. سپس مرورگر ساختار نمایش صفحه را تنظیم می‌کند تا تصویر را در آن قرار دهد. این همچنین به ما نشان می‌دهد که تصاویر فایل‌های مستقل هستند و هر یک به صورت مستقل بارگذاری می‌شوند.
اما این روشی نیست که برای نمایش مستندات بهینه باشد، زیرا مرورگر قبل از نمایش محتوای مستندات مجاور و بعدی، باید هر یک از فایل‌های تصویری را بررسی کند و فضای صفحه نمایش آنها را محاسبه کند. این کار ممکن است باعث تأخیر بسیار زیادی در نمایش مستند شود و خواندن کاربر را مختل کند.
برای سازندگان، روشی بهتر این است که از属性 height و width تگ <img> برای تعیین اندازه تصویر استفاده کنند. به این ترتیب، مرورگر قبل از دانلود تصویر، برای آن مکان را رزرو می‌کند و این کار باعث می‌شود که نمایش مستند سریع‌تر انجام شود و از حرکت محتوای مستند جلوگیری شود. هر دو این属性 باید اعداد صحیحی باشند و اندازه تصویر را به صورت پیکسل نشان دهند. ترتیب ظهور این属性 در تگ <img> مهم نیست.
مشکلات خصوصیات height و width
با اینکه خصوصیات height و width برچسب <img> می‌توانند عملکرد را بهبود بخشند و به شما اجازه می‌دهند تا ترفندهای کوچکی را پیاده‌سازی کنید، اما در استفاده از آنها مشکلات منفی و دشواری وجود دارد. حتی اگر کاربران امکان دانلود خودکار تصاویر را غیرفعال کرده باشند، مرورگر همچنان فضای مشخص شده برای تصویر را با اندازه تعیین شده نمایش می‌دهد. معمولاً این باعث می‌شود که صفحه به نظر بسیار بد بیاید، انگار که هیچ‌وقت تمام نشده است و بیشتر محتوا بی‌فایده است. اگر از این اندازه‌گیری‌های مشخص استفاده نکنید، مرورگر فقط یک آیکون تصویر در متنی قرار می‌دهد، که حداقل خواننده می‌تواند برخی از متن‌ها را بخواند.
برای این مشکل ما راه‌حلی نداریم، بلکه فقط می‌توانیم تأکید کنیم که باید از خصوصیت altو برخیمتن توصیفیبه این ترتیب خوانندگان حداقل می‌دانند که چه چیزی از دست رفته است. ما همچنان پیشنهاد می‌دهیم از این اندازه‌گیری‌ها استفاده کنید، زیرا ما از هر رفتاری که عملکرد شبکه را بهبود می‌بخشد، حمایت می‌کنیم.
