HTML <img> width attribute
تعریف و استفاده
width این属性 تصویر را به اندازه مناسب در پیکسل‌ها تعیین می‌کند.
توجه:برای تصویر height و width یک عادت خوب است. اگر این属性ها را تنظیم کنید، می‌توانید در زمان بارگذاری صفحه برای تصویر فضایی رزرو کنید. اگر این属性ها را تنظیم نکنید، مرورگر نمی‌تواند اندازه تصویر را تشخیص دهد و نمی‌تواند فضای مناسب برای آن رزرو کند، بنابراین هنگام بارگذاری تصویر، ترتیب صفحه تغییر می‌کند. (در بخش‌های بعدی این دیدگاه به طور دقیق توضیح داده می‌شود).
توجه:لطفاً از height و width اگر بخواهید تصویر را بزرگتر کنید، از height و width اگر تصویر کوچکتری بخواهید، کاربر باید تصویر پر حجمتری را بارگذاری کند (حتی اگر تصویر روی صفحه کوچک به نظر برسد). راه درست این است که قبل از استفاده از تصویر در وب‌سایت، تصویر را به اندازه مناسب توسط نرم‌افزار تغییر دهید.
خواندن ادامهشرح detail 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 برای ایجاد رنگ پس‌زمینه.
شرح detail height و width ویژگی‌ها
چرا باید از height و width ویژگی‌ها استفاده کنیم
آیا شما دیده‌اید که محتوای مستند در حال بارگذاری به صورت نامنظم حرکت می‌کند؟ دلیل این است که مرورگر برای نمایش هر یک از تصاویر بارگذاری شده، مدام ساختار صفحه را تنظیم می‌کند. مرورگر با بارگذاری و تحلیل عرض و ارتفاع تصویر، اندازه تصویر را مشخص می‌کند و سپس یک فضای مستطیل در پنجره نمایش ایجاد می‌کند. سپس مرورگر ساختار نمایش صفحه را تنظیم می‌کند تا تصویر را در آن قرار دهد. این به ما می‌گوید که تصاویر مستقل هستند و به طور جداگانه از فایل‌های منبع بارگذاری می‌شوند.
اما این روشی نیست که برای نمایش مستندات مؤثرترین باشد، زیرا مرورگر باید هر یک از فایل‌های تصویر را بررسی کند و فضای صفحه نمایش آنها را محاسبه کند، قبل از اینکه محتوای مستندات مجاور و بعدی را نمایش دهد. این ممکن است باعث تأخیر بسیار زیادی در نمایش مستند شود و خواندن کاربر را مختل کند.
برای سازندگان، روشی مؤثرتر این است که از height و width ویژگی‌های برچسب <img> برای مشخص کردن اندازه تصویر استفاده کنند. به این ترتیب، مرورگر قبل از بارگذاری تصویر برای آن فضایی را رزرو می‌کند، که می‌تواند نمایش مستند را سریع‌تر کند و از حرکت محتوای مستند جلوگیری کند. هر دو این ویژگی‌ها باید مقادیر صحیحی باشند و اندازه تصویر را به وسیله پیکسل نشان دهند. ترتیب ظهور این ویژگی‌ها در برچسب <img> مهم نیست.
مشکلات height و width ویژگی‌ها
اگر <img> برچسب کی height و width ویژگی‌ها می‌توانند عملکرد را بهبود بخشند و به شما اجازه می‌دهند تا برخی از تکنیک‌های کوچک را پیاده‌سازی کنید، اما در استفاده از آنها برخی از اثرات منفی دشوار وجود دارد. حتی اگر کاربران به طور خودکار بارگذاری تصاویر را غیرفعال کرده‌اند، مرورگر همچنان باید فضای اختصاص داده شده برای تصاویر را به اندازه مشخص شده نمایش دهد. و معمولاً این به معنای یک قاب خالی است که یک آیکون بی‌معنا در آن قرار دارد، نشان‌دهنده مکان قرارگیری تصویر. در این حالت صفحه به نظر بسیار بد خواهد آمد، مانند اینکه هیچ‌وقت تمام نشده است، و بیشتر محتوا بی‌فایده است. اگر از این اندازه‌های مشخص استفاده نکنید، مرورگر فقط یک آیکون تصویر در متون قرار خواهد داد، بنابراین حداقل برخی از متن‌ها قابل خواندن هستند.
اس سوال کے لئے ہم کو حل نہیں مل رہا ہے، ساتھ ہی کچھ بھی کہنا چاہیئے، یعنی، اس کا استعمال کریں alt ویژگی اورموصوف کی معلومات، اس طرح خوانندگان کم از کم جانتا ہوگا کہ یہاں کیا چھپا نہیں ہے۔ ہم اپنے ساتھ یہ ویژگیاں استعمال کیجئے، کیونکہ ہم نیٹ ورک کی کارکردگی کو بہتر بنانے والی تمام کارروائیاں کی حوصلہ افزائی کرتے ہیں。
بھرستوک کی مدد
| کروم | ایج | فائرفاکس | سافری | آپریا |
|---|---|---|---|---|
| کروم | ایج | فائرفاکس | سافری | آپریا |
| دسترس | دسترس | دسترس | دسترس | دسترس |
