ב-HTML, אנו יכולים לשנות את הגודל של כל תמונה באמצעות הדרכים השונות הבאות:

1. שימוש בתג HTML
2. שימוש בתכונת סגנון מוטבע
3. שימוש ב-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 כדי לשנות את גודל התמונה. לכן, עלינו להקליד את התכונות הבאות:

 <img src="//techcodeview.com/img/html-tutorial/88/how-change-image-size-html.webp"> 

שלב 3: ולבסוף עלינו לשמור את קובץ ה-Html ולאחר מכן להפעיל אותו.

איטרציה של רשימה ב-java

 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 הקיים בעורך הטקסט בו אנו רוצים להשתמש בתכונת style לשינוי גודל התמונה.

 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 . ולאחר מכן, עלינו להקליד את המאפיין width ו-height בתכונת style כמו שמוצג בבלוק הבא:

 <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: כעת, עלינו למקם את הסמן בתג head של מסמך ה-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 שלמעלה: