خصائص عرض <img> في HTML
التعريف والاستخدام
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"). |
مزيد من الأمثلة
تغيير حجم الصورة - إعداد الصور المملئة
لدي خاصية مخفية لخصائص الارتفاع والعرض، وهي أنك لا تحتاج إلى تحديد حجم الصورة الفعلي، مما يعني أن هاتين القيمتين يمكن أن تكونا أكبر أو أصغر من الحجم الفعلي. سيعيد المتصفح ضبط الصورة تلقائيًا لتناسب حجم المساحة المخصصة. يمكنك بسهولة إنشاء ملفات مصغرة للأحجام الكبيرة أو تضخيم الصور الصغيرة باستخدام هذا الأسلوب. ولكن يجب ملاحظة: يجب على المتصفح تنزيل الملف الكامل، بغض النظر عن حجمه النهائي الذي سيتم عرضه، و如果没有 الحفاظ على نسبة الارتفاع والعرض الأصلية، فإن الصورة قد تتشوه.
إحدى الحيل الأخرى لاستخدام خاصيات الارتفاع والعرض هي سهولة تعبئة منطقة الصفحة، و تحسين أداء المستند. تخيل أنك ترغب في وضع شرطة ملونة في المستند. لا تحتاج إلى إنشاء صورة بحجم كامل، على العكس من ذلك، يمكنك إنشاء صورة بعرض وارتفاع كل منهما بكسل واحد وتخصيص اللون الذي ترغب في استخدامه. ثم يمكنك استخدام خاصيات الارتفاع والعرض لتمديد حجمها إلى حجم أكبر.
<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> يمكن تحسين الأداء وتحقيق بعض التقنيات الصغيرة، إلا أن هناك بعض الآثار السلبية الصعبة عند استخدامها. حتى إذا قام المستخدم بإيقاف خاصية التحميل التلقائي للصور، فإن المتصفح لا يزال يجب عرض المساحة المخصصة للصورة بالحجم المحدد. عادةً يترك هذا للمستخدم عادةً هو إطار فارغ يحتوي على أيقونة غير معنوية تشير إلى أن هذا هو مكان الصورة. في هذه الحالة سيبدو الصفحة سيئة للغاية، وكأنها لم تكتمل بعد، وكثير من المحتويات غير مفيدة. إذا لم يتم استخدام الحجم المحدد، فإن المتصفح سيقوم فقط بوضع أيقونة صورة في النص، مما يترك على الأقل بعض النصوص القابلة للقراءة.
برای این سوال ما هنوز راهحلی نداریم، بلکه فقط میتوانیم تأکید کنیم که از استفاده کنید خصوصیت alt ونصوص توصیفیبه طوری که القاء حداقل معلوماتی باشد که القاء شده است. ما همچنان توصیه میکنیم از این اندازهگیریها استفاده کنید، زیرا ما از هر رفتار بهبود دهنده کارایی شبکه حمایت میکنیم.
دعم المتصفحات
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| الدعم | الدعم | الدعم | الدعم | الدعم |
