يتيح لنا HTML استخدام الصور في صفحات الويب وجعلها أكثر جاذبية من خلال تطبيق أنماط مختلفة. إذا كنت بحاجة إلى تغيير نسبة العرض إلى الارتفاع للصورة أو إذا كانت صورتك لا تتناسب مع تنسيق صفحة الويب ، فيمكنك تغيير حجمها. لهذا الغرض ، يمكنك استخدام ' العرض ' و ' ارتفاع 'في' IMG ' بطاقة شعار. يمكن تعيين قيم الخصائص هذه بسهولة في وحدات بكسل CSS.

في هذا الدليل ، ستتعرف على طريقة تغيير حجم الصورة بتنسيق HTML.

قبل البدء ، من الضروري إضافة الصورة إلى ملف HTML الذي سيتم تنفيذ عملية تغيير حجم الصورة عليه.

كيفية تضمين صورة في HTML؟

لإضافة صورة بتنسيق HTML ، استخدم الصيغة التالية:

وصف بناء الجملة المذكور أعلاه موصوف أدناه. ال ' IMG 'تستخدم العلامة سمتين:

• • 'src' يستخدم لتوفير مسار (URL) للصورة.
  • 'كل شىء' يستخدم لتوفير النص البديل إذا لم يتم عرض الصورة.

لغة البرمجة

يمثل الكود أدناه قسمين. في أول div ، أضفنا عنوانًا في أعلى منتصف صفحة الويب لدينا باسم ' حجم الصورة في HTML 'باستخدام العلامة

:

< شعبة >
< المركز >
< h1 > حجم الصورة في لغة البرمجة h1 >
المركز >
شعبة >

يضاف div الثاني بالفئة المسماة ' وعاء 'ولتمثيل الصورة في المركز ، استخدمنا علامة

. داخل المركز ، اكتب الكود المذكور أدناه لإضافة صورة:

< شعبة صف دراسي = 'وعاء' >
< المركز >
< IMG src = 'images / butterfly.jpg' كل شىء = 'نص بديل' >
المركز >
شعبة >

الصورة المحددة مع ' 640 * 437 ستبدو نسبة العرض إلى الارتفاع على النحو التالي:

سيوضح القسم التالي طريقة تغيير حجم الصورة.

كيفية تغيير حجم الصورة في HTML؟

يمكنك تخصيص حجم الصورة أو تغيير حجمها باستخدام ' العرض ' و ' ارتفاع 'لتعيين عرضه وارتفاعه.

الآن ، دعنا نضبط قيمة عرض الصورة المضافة على أنها ' 300 'وشاهد كيف يعمل:

< IMG src = 'images / butterfly.jpg' كل شىء = 'نص بديل' العرض = '300' >

يمكن ملاحظة أن عرض الصورة قد تم تغييره ، وتم تغيير حجمه بنجاح:

بالإضافة إلى العرض ، فإن ' ارتفاع يمكن أيضًا استخدام السمة 'للغرض نفسه. لعرض اختلاف الحجم ، اضبط ' 550 بكسل لارتفاع الصورة:

< IMG src = 'images / butterfly.jpg' كل شىء = 'نص بديل' العرض = '300' ارتفاع = '550' >

يمكنك ملاحظة الاختلاف في حجم الصورة بوضوح:

هذه هي الطريقة التي يتم بها استخدام سمات العرض والارتفاع لتغيير حجم الصورة.

استنتاج

في HTML ، ' ارتفاع ' و ' العرض 'السمات المستخدمة لتغيير حجم الصورة. يمكنك تغيير نسبة العرض إلى الارتفاع الافتراضية للصورة المضافة عن طريق تعيين قيم هذه السمات. نتيجة لذلك ، يمكن رؤية اختلاف واضح فيما يتعلق بحجم الصورة. لقد أوضحت هذه المدونة طريقة استخدام خصائص الطول والوزن لتغيير حجم الصور بتنسيق HTML.