يمتلك العنصر img بعض الخصائص مثل width و height والتي من خلالها نستطيع تحديد طول وعرض الصورة, لاحظ مثلا الكود التالي

<img src="test.png" alt="test">

هذا كود html وهو عبارة عن عنصر img , سوف ستم عرض الصورة بحجمها الطبيعي, أي سوف تأخذ عرضها وارتفاعها الأصليين, سوف تكون النتيجة كالتالي

أما لو حاولنا أن نقوم بتغيير حجم الصورة باستخدام html فقط سوف نستخدم الخاصيتين width و height كالتالي

<img src="test.png" alt="test" width="100" height="100">
                               ^^^^^^^^^^^^^^^^^^^^^^^

سوف تكون النتيجة كالتالي

بتاريخ 2 دقائق مضت قال محمد أبو عواد:

يمتلك العنصر img بعض الخصائص مثل width و height والتي من خلالها نستطيع تحديد طول وعرض الصورة, لاحظ مثلا الكود التالي

<img src="test.png" alt="test">

هذا كود html وهو عبارة عن عنصر img , سوف ستم عرض الصورة بحجمها الطبيعي, أي سوف تأخذ عرضها وارتفاعها الأصليين, سوف تكون النتيجة كالتالي

أما لو حاولنا أن نقوم بتغيير حجم الصورة باستخدام html فقط سوف نستخدم الخاصيتين width و height كالتالي

<img src="test.png" alt="test" width="100" height="100">
                               ^^^^^^^^^^^^^^^^^^^^^^^

سوف تكون النتيجة كالتالي

شكرا لك

عندما تكون الصورة غير متلائمة مع التنسيق وتريد تغيير حجمها، فيمكنك القيام بذلك في HTML. من أبسط الطرق لتغيير حجم صورة في HTML استخدام سمات الطول والعرض height و width في العنصر img. حيث يمكنك من خلالهما أن تحدد ارتفاع وعرض الصورة. على سبيل المثال الصورة التالية حجمها 960*640 :

يمكننا عرضها بارتفاع 500 بكسل وعرض 400 بكسل:

<img src="https://ik.imagekit.io/ikmedia/women-dress-2.jpg" 
     width="400" 
     height="500" />

إذا كان الارتفاع والعرض المطلوبان للصورة لا يتطابقان مع الأبعاد الفعلية للصورة، فسيقوم المتصفح بتقليص أو توسيع الصورة تلقائياً. وتختلف عملية التوسيع أو التقليص حسب الخوارزمية التي يستخدمها المتصفح. لكن يجب أن تعلم أن عملية تغيير حجم الصورة له جوانب سلبية على جودة الصورة وعرضها (حيث يسبب بطئ في عرضها) وطبعاً هناك حلول أخرى لذلك مثل استخدام "ImageKit.io" لتغيير حجم الصورة بشكل ديناميكي اعتماداً على معاملات URL (يمكنك البحث في الموضوع فهو مهم جداً). انظر مثلاً:

https://ik.imagekit.io/ikmedia/woman.jpg

للحصول على صورة بعرض 200 بكسل، سنضيف معامل استعلام tr بقيمة w-200 كما هو موضح أدناه:

https://ik.imagekit.io/ikmedia/woman.jpg?tr=w-200