خصائص طول <img> في HTML
تعريف والاستخدام
طول خصائص تحديد طول الصورة، باستخدام وحدات البكسل.
نصيحة:لا بد من تحديد دائمًا طول و خصائص عرضإذا تم تعيين الطول والعرض، فإن مساحة تحتاجها الصورة عند تحميل الصفحة سيتم تحديدها مسبقًا. إذا لم يكن لديك هذه الخصائص، فإن المتصفح لا يعرف حجم الصورة، ولا يمكنه تحديد مساحة مناسبة لها. هذا يمكن أن يؤدي إلى تغيير ترتيب الصفحة أثناء التحميل (عند تحميل الصورة).
نصيحة:استخدام طول و عرض تقليل حجم الصور الكبيرة يجبر المستخدمين على تنزيل الصور الكبيرة (حتى إذا كانت تبدو صغيرة على الصفحة). لتجنب هذا، استخدم برامج معالجة الصور لتقليل حجم الصور قبل استخدامها في الصفحة.
قراءة متعمقة:تفسير خصائص الارتفاع والعرض
مثال
صورة بعرض 500 بكسل وارتفاع 600 بكسل:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
القواعد
<img height="البكسل">
قيمة الخاصية
| القيمة | الوصف |
|---|---|
| البكسل | تحديد طول الصورة بالبكسل (مثل height="100"). |
مزيد من الأمثلة
تغيير حجم الصورة - إعداد الصور المملأه
يملك خصائص الارتفاع والعرض خاصية مخفية، وهي أنك لا تحتاج إلى تحديد حجم الصورة الفعلي، أي أن هاتين القيمتين يمكن أن تكونا أكبر أو أصغر من الحجم الفعلي. سيقوم المتصفح بتعديل الصورة تلقائيًا لتناسب حجم المساحة المحددة. يمكنك بسهولة إنشاء صورة مصغرة للأحجام الكبيرة أو تكبير الصور الصغيرة باستخدام هذا الأسلوب. ولكن يجب الانتباه إلى أن المتصفح لا يزال يجب تنزيل الملف الكامل، بغض النظر عن حجمه النهائي الذي سيظهر، و إذا لم يتم الحفاظ على نسبة الأبعاد الأصلية، ستتشوه الصورة.
واحدة من مهارات استخدام خصائص الارتفاع والعرض هي أنك تستطيع بسهولة ملء منطقة الصفحة، بالإضافة إلى تحسين أداء المستند. تخيل أنك ترغب في وضع شريط ملون في المستند. لا تحتاج إلى إنشاء صورة بقياس كامل، على العكس من ذلك، قم بإنشاء صورة بعرض وارتفاع كل منهما ببكسل واحد فقط وأعطها اللون الذي ترغب في استخدامه. ثم استخدم خصائص الارتفاع والعرض لتمديد حجمها إلى حجم أكبر.
<img src="/i/ct_1px.gif"} width="200px" height="30px" />
هذا هو تأثير HTML المذكور أعلاه، هذا الشريط الملون مصنوع من صورة واحدة ببكسل واحد فقط:
استخدام النسبة المئوية
فنصيحة أخرى لاستخدام خاصية عرض هو استخدام النسبة المئوية بدلاً من القيمة المطلقة للبكسل. هذا سيسمح للمتصفح بتكبير أو تقليل الصورة بناءً على نسبة معينة من نافذة التصفح. لذا، إذا كنت ترغب في إنشاء شريط ملون بعرض مساوٍ لعرض النافذة وارتفاع 30 بكسل، يمكنك القيام بذلك كما يلي:
<img src="/i/ct_1px.gif"} width="60%" height="30px" />
عندما يتغير حجم نافذة المستند، يغير حجم هذه الصورة أيضًا:
نصيحة:إذا تم تقديم قيمة عرض بنسبة مئوية وتم تجاهل طول، فإن المتصفح سينقسم على زيادة أو تقليل الصورة على نفس نسبة الأبعاد. هذا يعني أن نسبة الطول إلى العرض للصورة لن تتغير، و لن تتشوه الصورة.
الرجاء النظر في HTML التالي:
<img src="/i/ct_1px.gif"} width="20%" />
على سبيل المثال، إذا قمت بتعيين قيمة النسبة المئوية لخصائص عرض الصورة ct_1px.gif فقط، فستحصل على صورة مستطيلة (هذا لأن ct_1px.gif هو مستطيل له عرض وارتفاع 1 بكسل فقط):
نصيحة:نقدم الأمثلة السابقة لتحسين فهمك لاستخدام خصائص الارتفاع والعرض. إذا كنت بحاجة إلى مساحة كبيرة من اللون البحت لتزيين الصفحة، فإن أفضل طريقة هياستخدام CSS لإنشاء لون الخلفية.
تفسير خصائص الارتفاع والعرض
لماذا يجب استخدام خصائص الارتفاع والعرض
هل رأيت محتوى الوثيقة يتحرك بشكل غير منتظم عند التحميل؟ السبب في ذلك هو أن المتصفح يجب أن يعدل ترتيب الصفحة باستمرار لكي يعرض كل صورة يتم تحميلها. يقوم المتصفح بتحميل وتحليل عرض الصورة والارتفاع لتحديد حجم الصورة، ثم يترك مساحة مستطيلة في نافذة العرض. بعد ذلك، سيعدل المتصفح ترتيب عرض الصفحة لضمان إدراج الصورة في العرض. هذا يخبرنا أيضًا أن الصور هي ملفات مستقلة، وتتم تحميلها بشكل مستقل عن الملفات الأصلية.
لكن هذا ليس أفضل طريقة لعرض الوثيقة، لأن المتصفح يجب أن يتحقق من كل ملف صورة ويحسب مساحتها على الشاشة قبل عرض المحتويات المجاورة واللاحقة. قد يؤدي ذلك إلى تأخير كبير في عرض الوثيقة، مما يوقف قراءة المستخدم.
للصانعين، طريقة أكثر فعالية هي استخدام خصائص الارتفاع والعرض لـ <img> لتحديد حجم الصورة. بهذه الطريقة، يقوم المتصفح بتحديد الموقع المخصص للصورة قبل تحميل الصورة، مما يمكن من تسريع عرض الوثيقة وتجنب تحريك محتويات الوثيقة. تتطلب هاتان الخصائص أن تكون قيمتين صحيحتين، وتعبر عن حجم الصورة بالبكسل. لا يهم ترتيب هاتان الخصائص في علامة <img>.
مشكلة خصائص الارتفاع والعرض
على الرغم من أن خصائص الارتفاع والعرض لـ <img> يمكن تحسين الأداء وتحقيق بعض التقنيات الصغيرة، إلا أن هناك بعض الآثار السلبية الصعبة عند استخدامها. حتى إذا قام المستخدم بإيقاف خاصية التحميل التلقائي للصور، فإن المتصفح سيعرض مساحة مخصصة للصورة بالحجم المحدد. عادةً يترك هذا الفراغ للقراء فراغًا فارغًا يحتوي على أيقونة غير معنوية تعبر عن مكان الصورة. في هذه الحالة سيبدو الصفحة سيئة للغاية، وكأنها لم تكتمل بعد، وكثير من المحتويات غير مفيدة. إذا لم يتم استخدام الحجم المحدد، فإن المتصفح سيضيف فقط أيقونة الصورة في النص، مما يترك على الأقل بعض النصوص القابلة للقراءة.
لم نجد بعد حلًا لهذه المشكلة، نحن نؤكد فقط على استخدامها خصائص alt ومعنصوص وصفيةبهذا يعلم القارئ على الأقل ما ينقصه هنا. نحن نوصي باستخدام هذه خصائص الحجم لأننا نشجع على كل ما يمكن تحسين أداء الشبكة.
دعم المتصفحات
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| الدعم | الدعم | الدعم | الدعم | الدعم |
