في HTML، يمكننا تغيير حجم أي صورة باستخدام الطرق المختلفة التالية:
- باستخدام علامة HTML
- استخدام سمة النمط المضمنة
- باستخدام CSS الداخلي
باستخدام علامة HTML
ملاحظة: لا يدعم HTML 5 سمة الارتفاع والعرض ![]()
، لذلك يتعين علينا استخدام سمة النمط المضمّن وخيارات CSS الداخلية لتغيير الصورة أو حجم الصورة.
إذا أردنا تغيير حجم الصورة في المستند باستخدام علامة HTML الذي سيتم عرضه على صفحة الويب، علينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات، يمكننا بسهولة تغيير حجم الصورة:
الخطوة 1: أولاً، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد تغيير حجم الصورة فيه.
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
الخطوة 2: الآن، ضع المؤشر داخل علامة img. وبعد ذلك، يتعين علينا استخدام سمة الارتفاع والعرض لعلامة img لتغيير حجم الصورة. لذلك، علينا أن نكتب هذه السمات:
تنظيف ذاكرة التخزين المؤقت npm
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp">
الخطوه 3: وأخيرًا يتعين علينا حفظ ملف Html ثم تشغيله.
قائمة مرتبطة وقائمة الصفيف
Chnage the Size of an image Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>اختبره الآن
يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:
استخدام سمة النمط المضمن
إذا أردنا تغيير حجم الصورة باستخدام سمة النمط المضمنة التي سيتم عرضها على صفحة ويب، فيجب علينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات، يمكننا بسهولة تغيير حجم الصورة.
الخطوة 1: أولاً، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد استخدام سمة النمط فيه لتغيير حجم الصورة.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
الخطوة 2: الآن، ضع المؤشر داخل علامة img لتلك الصورة التي نريد تغيير حجمها. وبعد ذلك، يتعين علينا كتابة سمة النمط مباشرة بعد سمة src. وبعد ذلك، علينا كتابة خاصية العرض والارتفاع في سمة النمط كما هو موضح في الكتلة التالية:
<img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
الخطوه 3: وأخيرًا علينا حفظ ملف Html ثم تشغيله.
Change the Size of an image using inline style attribute Hello User! <br> You are at <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>اختبره الآن
يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:
طرق جافا
استخدام CSS الداخلي
إذا أردنا تغيير حجم صورة أو صورة باستخدام ورقة الأنماط المتتالية الداخلية التي سيتم عرضها على صفحة ويب، يتعين علينا اتباع الخطوات الموضحة أدناه. باستخدام هذه الخطوات، يمكننا بسهولة تغيير حجم أي صورة.
الخطوة 1: أولاً، يتعين علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد استخدام CSS الداخلي فيه لتغيير حجم الصورة.
Change the Size of an image using internal CSS Hello User! <br> This is <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> <br>
الخطوة 2: الآن، يتعين علينا وضع المؤشر في علامة الرأس لمستند Html ثم تحديد الأنماط داخل ملف Html العلامة كما هو موضح في الكتلة التالية. ومن ثم اكتب العرض والارتفاع السمة في محدد الهوية.
تعدد الأشكال في جاوة
#imagesize { width:100px; height:100px; } الخطوه 3: الآن، يتعين علينا كتابة المعرف في علامة img لتلك الصورة التي نريد تغيير حجمها:
Change the Size of an image using internal CSS #imagesize { width:200px; height:200px; } Hello User! <br> This is <br> <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp" id="imagesize"> <br> اختبره الآن الخطوة 5: الآن علينا حفظ ملف Html ثم تشغيل الملف. توضح لقطة الشاشة التالية مخرجات كود Html أعلاه:
