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