علامة <img> في HTML height وwidth الخاصية
مثال
ضبط عرض الصورة وارتفاعها على التوالي إلى 200 بكسل:
<img src="/i/mouse.jpg" height="200" width="200" />
تعريف والاستخدام
تأثيرات الـ <img> علامة على ضبط حجم الصورة.
نصيحة:تخصيص خصائص الارتفاع والعرض للصورة هي عادة جيدة. إذا تم تعيين هذه الخصائص، يمكن تحديد مساحة الصورة عند تحميل الصفحة. إذا لم يتم تعيين هذه الخصائص، لا يمكن للمتصفح معرفة حجم الصورة، ولا يمكن احتساب مساحة الصورة بشكل صحيح، مما يؤدي إلى تغيير تشكيل الصفحة عند تحميل الصورة. (سيتم شرح هذا الرأي بشكل مفصل أدناه).
نصيحة:لا تقم بتوسيع الصورة من خلال خصائص الارتفاع والعرض. إذا تم تقليل الصورة من خلال خصائص الارتفاع والعرض، يجب على المستخدم تنزيل الصورة الكبيرة (حتى إذا كان الصورة تبدو صغيرة على الصفحة). الأسلوب الصحيح هو معالجة الصورة إلى حجم مناسب باستخدام برنامج قبل استخدامها في الصفحة.
قراءة متعمقة:تفسير خصائص height و width
أمثلة إضافية
تغيير حجم الصورة - إنشاء صور ملونة
يملك خصائص عرض وارتفاع خاصية مخفية، وهي أن لا يتعين على المستخدم تحديد حجم الصورة الفعلي، مما يعني أن هاتين القيمتين يمكن أن تكون أكبر أو أصغر من الحجم الفعلي. سيعيد المتصفح ضبط الصورة تلقائيًا حتى تتوافق مع حجم المكان المخصص لها. يمكن استخدام هذا الأسلوب بسهولة لإنشاء شريط عرض للصور الكبيرة، أو تضخيم الصور الصغيرة بشكل كبير. ولكن يجب الانتباه إلى أن المتصفح لا يزال يجب تنزيل ملف الصورة كاملًا، بغض النظر عن حجمه النهائي الذي سيتم عرضه، و如果没有 الحفاظ على نسبة العرض إلى الارتفاع الأصلية، قد تحدث للصورة تشوه.
من بين الأسرار الأخرى لخصائص عرض وارتفاع هو أنه يمكنك بسهولة تعبئة منطقة الصفحة، بالإضافة إلى تحسين أداء المستند. تخيل أنك ترغب في وضع شريط ملون في المستند. لا تحتاج إلى إنشاء صورة بقياس كامل، على العكس من ذلك، كل ما تحتاجه هو إنشاء صورة بعرض وارتفاع بكسل واحد وتخصيص اللون الذي ترغب في استخدامه. ثم يمكنك استخدام خصائص عرض وارتفاع لتوسيعها إلى حجم أكبر.
<img src="/i/ct_1px.gif" width="200px" height="30px" />
هذا هو تأثير ذلك المقطع من HTML، هذا الشريط الملون تم إنشاؤه باستخدام صورة واحدة ببكسل واحد فقط:
استخدام النسبة المئوية
من بين الأسرار الأخيرة لخصائص عرض هو استخدام النسبة المئوية بدلاً من القيمة المطلقة للبكسل. هذا سيتيح للمتصفح تقليل الصورة بنسبة معينة مقارنة بنافذة التصفح. لذا، إذا كنت ترغب في إنشاء شريط ملون بعرض نفس عرض نافذة التصفح وارتفاع 30 بكسل، يمكنك القيام بذلك كما يلي:
<img src="/i/ct_1px.gif" width="60%" height="30px" />
عندما يتغير حجم نافذة المستند، يتغير حجم هذه الصورة أيضًا:
نصيحة:إذا تم تقديم قيمة عرض بنسبة مئوية وتم تجاهل طول، فإن المتصفح سيعمل على الحفاظ على نسبة العرض إلى الارتفاع للصورة سواء تم تضخيمها أو تقليلها. هذا يعني أن نسبة الارتفاع إلى العرض للصورة لن تتغير، و لن تحدث للصورة أي تشوه.
انظر إلى الكود التالي: }}
<img src="/i/ct_1px.gif" width="20%" />
بمعنى آخر، إذا تم تعيين قيمة النسبة المئوية لخصائص العرض للصورة ct_1px.gif فقط،则会得到 صورة مستطيلة (ذلك لأن الصورة الأصلية ct_1px.gif هي مستطيل ذو عرض وارتفاع 1 بكسل فقط):
نصيحة:يمكنك تجربة أدواتنا على الإنترنتتجربة شخصية!
نصيحة:نقدم الأمثلة السابقة لتحسين فهمك لاستخدام خصائص height و width. إذا كنت بحاجة إلى مساحة صغيرة من اللون الباستيل لتزيين الصفحة، فإن الطريقة الأفضل هياستخدام CSS لإنشاء لون الخلفية.
دعم المتصفح
يدعم جميع المتصفحات خصائص height و width.
النحو
<img height="value" />
أو:
<img width="value" />
قيمة الخاصية
| القيمة | وصف |
|---|---|
| pixels | قيمة الارتفاع أو العرض بالبكسل. |
| percent | قيمة الارتفاع أو العرض كنسبة مئوية من العنصر المضمون. |
TIY مثال
- تعديل حجم الصورة
- هذا المثال يوضح كيفية تعديل حجم الصورة إلى حجم مختلف.
تفسير خصائص height و width
لماذا يجب استخدام خصائص height و width
هل رأيت محتوى الوثيقة يتحرك بشكل غير منتظم عند تحميل الوثيقة؟ السبب في ذلك هو أن المتصفح يحاول عرض كل صورة يتم تحميلها، ويقوم بتعديل ترتيب الصفحة باستمرار. يقوم المتصفح بتحميل وتحليل عرض الصورة وارتفاعها لتحديد حجم الصورة، ثم يضمن مكاناً مستقيماً في نافذة العرض. بعد ذلك، يقوم المتصفح بتعديل ترتيب عرض الصفحة لضم الصورة في العرض. هذا يخبرنا أيضًا أن الصور هي ملفات مستقلة، وكل منها يتم تحميله بشكل مستقل.
لكن هذا ليس أفضل طريقة لعرض الوثيقة، لأن المتصفح يجب أن يتحقق من كل ملف صورة ويحسب مساحتها على الشاشة قبل عرض المحتويات المتsecutive واللاحقة. قد يؤدي ذلك إلى تأخير كبير في عرض الوثيقة، مما يوقف قراءة المستخدم.
بالنسبة للمبدعين، طريقة أكثر فعالية هي استخدام خصائص الـ height و width في علامة <img> لتحديد حجم الصورة. بهذه الطريقة، يضمن المتصفح تخصيص مكان للصورة قبل تحميلها، مما يمكن من تسريع عرض الوثيقة وتجنب تحرك محتويات الوثيقة. تتطلب هاتان الخاصيتان أن تكونا قيمتين صحيحتين، وتعبران عن حجم الصورة بالبكسل. لا يهم ترتيب ظهور هاتان الخاصيتان في علامة <img>.
مشکلات خصوصیات height و width
با اینکه خصوصیات height و width تگ <img> میتوانند عملکرد را بهبود بخشند و برخی ترفندهای کوچک را ممکن کنند، اما در استفاده از آنها مشکلات منفی قابل توجهی نیز وجود دارد. حتی اگر کاربران امکان دانلود خودکار تصاویر را غیرفعال کرده باشند، مرورگر همچنان فضای اختصاص داده شده برای تصاویر را با اندازه مشخص شده نمایش میدهد. معمولاً این باعث میشود که به خوانندگان یک قاب خالی نشان داده شود که در آن یک آیکون بیمعنی قرار دارد، نشاندهنده مکان قرارگیری تصویر است. در این حالت صفحه به نظر بسیار بد خواهد آمد، انگار که هیچکس آن را تمام نکرده است و بیشتر محتوا بیفایده خواهد بود. اگر از این اندازهگیریهای مشخص استفاده نکنید، مرورگر فقط یک آیکون تصویر در متنی قرار خواهد داد، بنابراین حداقل مقداری از متن قابل خواندن باقی خواهد ماند.
برای این مشکل ما هنوز راهحلی نداریم، فقط میتوانیم تأکید کنیم که باید از خصوصیت altو بامتن توصیفیبه این ترتیب خوانندگان حداقل میدانند که چه چیزی از دست رفته است. ما همچنان توصیه میکنیم از این اندازهگیریها استفاده کنید، زیرا ما از هر رفتاری که میتواند عملکرد شبکه را بهبود بخشد، حمایت میکنیم.
