أضف الصور في Markdown وتعديل حجم الصورة

لإضافة الصور في Markdown:

الصيغة الواردة أدناه.

لتعديل حجم الصورة في Markdown:

لتعديل حجم الصورة في Markdown ، نستخدم علامة “ ” في HTML. تساعد هذه العلامة فقط في تعديل حجم الصورة في Markdown وترد أدناه بنية علامة ' ' هذه.

يمكننا تغيير حجم الصورة عن طريق تحديد قيم العرض والارتفاع بالأرقام وكذلك بالنسب المئوية. يمكننا أيضًا استخدام سمة النمط في علامة “ ” لتعديل حجم الصورة في Markdown.

المثال رقم 01:

نحن نستخدم Visual Studio Code لتنفيذ أكواد Markdown. بالنسبة لرموز Markdown ، يتعين علينا فتح كل من محرر النصوص وكذلك نافذة المعاينة. في محرر النصوص ، يتعين علينا إضافة المدخلات والحصول على الإخراج في نافذة المعاينة. في محرر النصوص ، نضيف الصورة أولاً في Markdown بوضع علامة '!' ثم نضيف أقواس مربعة نضيف فيها 'نص بديل'. الآن ، نضيف مسار الصورة.

نقوم بإدخال اسم الصورة بامتدادها لأنه يتم حفظ كل من الرمز والصورة في نفس الدليل. لذلك ، نضيف الاسم هنا وهو 'cloud.png'. ثم نضيف النص الذي هو 'صورة سحابة' وهذا هو النص الذي يظهر فقط عند تمرير الماوس. الآن ، تمت إضافة الصورة ويمكننا أيضًا رؤية هذه الصورة في نافذة المعاينة.

تظهر الصورة السحابية أدناه حيث أضفنا هذه الصورة في رمز Markdown المعروض أعلاه.

المثال الثاني:

الآن ، نقوم بتعديل حجم هذه الصورة باستخدام علامة “ ”. أولاً ، نقوم بإدخال 'src' حيث يتم إضافة اسم أو مسار الصورة. بعد ذلك ، نضع 'alt' ونضبط 'Cloud Image'. قمنا بتعديل 'عرض' الصورة إلى '230'. يتم ضبط 'الارتفاع' على '300'. نضيف أيضًا 'العنوان' في علامة ' ' وتكون قيمة هذا 'العنوان' هي 'عنوان السحابة'. الآن ، تم تعديل حجم الصورة. يمكنك رؤية الحجم المعدل للصورة في نافذة المعاينة.

يتم تعديل حجم الصورة في هذه النتيجة ويكون 'عرض' الصورة '230' و 'الارتفاع' '300'. هذا لأننا عدلنا هذا العرض والارتفاع في كود Markdown.

المثال الثالث:

يمكننا أيضًا تعديل 'عرض' و 'ارتفاع' الصورة عن طريق وضع قيمهما في النسب المئوية. بعد إضافة اسم أو مسار الصورة وضبط 'alt' على 'Cloud Image' ، قمنا بتعيين 'عرض' و 'ارتفاع' الصورة على '50٪'. ثم أضف 'العنوان' وأغلق هذه العلامة.

هذه هي الصورة التي تم تعديل حجمها باستخدام علامة “ ”. ارتفاع الصورة وعرضها '50٪'.

المثال الرابع:

الآن ، نحن نستخدم سمة 'style' في علامة ' ' لتعديل حجم الصورة في Markdown. يجب أن نضيف اسم الصورة ثم سمة 'alt'. بعد ذلك ، نضع سمة 'style' وأضفنا 'العرض والارتفاع' كقيم لها. 'العرض' الذي قمنا بتعيينه بالبكسل وهو '500 بكسل' و 'الارتفاع' هو '400 بكسل'. الآن ، سيتم ضبط حجم الصورة وفقًا لذلك.

تم تحديث حجم الصورة في هذه النتيجة ؛ أصبح 'عرضه' الآن '500 بكسل' و 'ارتفاعه' هو '400 بكسل'. هذا مرئي كنتيجة لكود Markdown الموضح أعلاه حيث قمنا بتعديل العرض والارتفاع في سمة النمط.

المثال الخامس:

نحن نضيف صورة أخرى. لكن في رمز Markdown هذا ، لا نغير حجم الصورة. يتغير حجم الصورة فقط عندما نستخدم علامة ' '. نضع '!' ثم أضف النص الموجود داخل الأقواس المربعة وهو 'Sun Image'. بعد إغلاق الأقواس المربعة ، نضع الأقواس التي أدخلنا فيها اسم الصورة 'New_sun.png' ثم نضيف النص الذي سيظهر عند تمرير الماوس. سيظهر الحجم الأصلي للصورة في النتيجة.

تظهر صورة الشمس كما أضفنا هذه الصورة في Markdown code. كما أن الحجم الأصلي للصورة مرئي لأنه لا يمكننا ضبط حجم الصورة بدون استخدام علامة ' '.

مثال # 06:

من خلال استخدام علامة ' ' ، نقوم الآن بتغيير حجم هذه الصورة. أولاً ، نضيف اسم أو مسار الصورة التي نريد تعديل حجمها إلى الحقل 'src'. تم تغيير 'عرض' و 'ارتفاع' الصورة إلى '300'. لقد تغير حجم الصورة الآن. تظهر نافذة المعاينة الحجم الجديد للصورة.

تم تعديل كل من عرض الصورة وارتفاعها إلى '300'.

المثال السابع:

من خلال تعيين قيم 'العرض' و 'الارتفاع' للصورة بالنسب المئوية ، يمكننا بسهولة تغيير هذه الأبعاد. كلانا عدلنا 'عرض' و 'ارتفاع' الصورة إلى '40٪' ثم أغلقنا هذه العلامة.

ها هي الصورة بارتفاع 40٪ وعرضها أيضًا 40٪. لقد أضفنا هذا العرض والارتفاع داخل علامة ' ' بعد إضافة اسم الصورة.

المثال الثامن:

الآن ، نحن نستخدم سمة 'style' في علامة ' ' لتغيير حجم الصورة في Markdown. أضفنا 'العرض والارتفاع' كقيمتين إلى سمة 'النمط' بعد إضافة اسم الصورة وسمة 'alt'. 'العرض' الذي نحدده هو '450 بكسل' ، بينما يتم تعديل 'الارتفاع' أيضًا إلى '450 بكسل'. سيتغير حجم الصورة الآن بشكل مناسب وفقًا لهذه القيم الجديدة للعرض والارتفاع.

الآن ، تظهر نتيجة هذا الرمز أيضًا في نافذة المعاينة المعروضة أدناه. عرض وارتفاع هذه الصورة الآن '450 بكسل' في هذه النتيجة أدناه.

استنتاج:

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