בפוסט הזה נראה איך אפשר להגדיר גדלים ב- CSS. נתרכז בעיקר בגודל של פונט (עבור טקסט) ובגודל של תמונות. בהמשך נראה דברים נוספים שאפשר לשלוט בגודלם באמצעות CSS.

בואו נתחיל בגודל של פונט. לצורך כך, נתחיל עם HTML פשוט שכולל רק כותרת ופסקה:

<body>
   <h1>px, %, em</h1>
   <p id="par1">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia quos earum nam fugiat nihil veniam voluptatum, accusantium ipsa enim delectus laboriosam odit deserunt cum corrupti doloremque neque velit magnam ab id voluptatibus necessitatibus vitae dolores.
   </p>
</body>

שימו לב שנתנו id לפסקה (“par1”), כדי שנוכל לגשת אליה ב- CSS.

כך הדף נראה:

 

 

קביעת גודל של טקסט באמצעות px

כדי לשנות את גודל הטקסט, נשתמש ב- property של font-size.

הדרך הראשונה שנראה לשנות את גודל הפונט, היא להגדיר אותו על ידי px.

px זה קיצור של פיקסל, שזו יחידת התצוגה הבסיסית והקטנה ביותר של המסך.

בואו נשתמש ב- px כדי להגדיר את גודל הפונט:

#par1 {
   font-size: 16px;
}

אבל כשמרעננים את הדף… מקבלים בדיוק אותו דבר. זה כיוון שגודל הפונט של ברירת המחדל הוא 16 פיקסלים, לכן לא לכתוב CSS כלל, או לכתוב ב- CSS שגודל הפונט הוא 16 פיקסלים, ייתנו את אותה תוצאה.

אם, לעומת זאת, נשנה את גודל הפונט למשל ל-22:

#par1 {
   font-size: 22px;
}

מקבלים:

 

 

ואנו רואים שהטקסט אכן גדל.

קביעת גודל של טקסט באמצעות אחוזים

בואו ננסה כעת להשתמש באחוזים, במקום פיקסלים. ברירת המחדל היא 100%, כך שלהגדיר גודל פונט של 100%:

#par1 {
   font-size: 100%;
}

ייתן אותה תוצאה כמו לא להגדיר את הגודל כלל.
אם, לעומת זאת, נגדיר גודל של 200%:

#par1 {
   font-size: 200%;
}

אז נקבל גודל פונט גדול פי שניים - שזה כמו להגדיר פונט של 32 פיקסלים.

קביעת גודל של טקסט באמצעות em

יש עוד דרך שימושית להגדיר גודל של פונט, וזה באמצעות em. em מאוד דומה לאחוזים, אבל ערך ברירת המחדל שלו הוא 1, שמקביל ל- 100%.

לכן, אם נגדיר את גודל הפונט להיות 1em:

#par1 {
   font-size: 1em;
}

נקבל שוב את הגודל של ברירת המחדל (16 פיקסלים), הגודל אותו היינו מקבלים אם לא היינו מגדירים דבר ב- CSS.

אם נגדיר גודל של 2em:

#par1 {
   font-size: 2em;
}

אנו מקבלים טקסט גדול פי 2, וזה שקול ל- 200% או 32 פיקסלים.

הגדרת גודל תמונה ב- CSS

בואו נוסיף תמונה ל- HTML שלנו:

<body>
   <h1>px, %, em</h1>
   <p id="par1">Here is some text</p>
   <img id="img1" src="./backgrounds/pexels-jaime-reimer-2662116.jpg" alt="landscape">
</body>

אם לא נגדיר גודל לתמונה, היא תוצג בגודל המקורי שלה, לפי קובץ התמונה עצמו.

 

 

אבל באמצעות CSS, אנחנו יכולים לשנות את הגודל שהתמונה תתפוס.

אפשר להגדיר את הגודל של התמונה בשלושה אופנים:

  • אפשר להגדיר את רוחב התמונה
  • אפשר להגדיר את גובה התמונה
  • אפשר להגדיר את הרוחב וגם את הגובה

אם נגדיר רק את אחד המימדים, דהיינו רק את הרוחב או רק את הגובה, ה- aspect ratio (יחס גובה לרוחב) של התמונה יישמר. אבל אם נגדיר את שניהם, היחס לא יישמר והתמונה תתעוות.

הגדרת גודל תמונה באמצעות px

בואו נגדיר את רוחב התמונה, כך שתתפוס 250 פיקסלים:

#img1 {
   width: 250px;
}

והתוצאה:

 

 

במקום להגדיר את רוחב התמונה, אנו יכולים להגדיר את גובהה:

#img1 {
   height: 250px;
}

 

 

כאמור, אנחנו יכולים להגדיר את הגובה וגם את הרוחב:

#img1 {
   height: 250px;
   width: 150px;
}

 

 

אבל זה גורם לשינוי ה- aspect ratio, כך שמתקבלת תמונה מעוותת.

לפעמים לא נרצה להגדיר את התמונה בפיקסלים. הסיבה היא שכאשר אנו מגדירים גודל בפיקסלים, הוא קבוע, ללא תלות בגודל החלון. כתוצאה מכך, עלולה להתקבל תמונה שתהיה קטנה מדי עבור חלונות רחבים, אך תחרוג מגודל המסך בחלונות צרים. אם, למשל, נגדיר את רוחב התמונה להיות 700 פיקסלים, ונציג אותה בחלון צר:

 

 

אנו רואים שהיא רחבה יותר מהמקום שיש עבורה, לכן היא נחתכת ואנו רואים רק את חלקה.

הגדרת גודל תמונה באמצעות em

בואו נשים את התמונה בתוך div, וניתן גם ל- div ערך של id:

<body>
   <h1>px, %, em</h1>
   <p id="par1">Here is some text</p>
   <div id="img-div">
      <img id="img1" src="./backgrounds/pexels-jaime-reimer-2662116.jpg" alt="landscape">
   </div>
</body>

כמו שאמרנו, ערך ברירת המחדל של em הוא 16 פיקסלים. לכן, אם נגדיר את רוחב התמונה להיות 10em:

#img1 {
   width: 10em;
}

נקבל תמונה שרוחבה 160 פיקסלים:

 

 

אבל זה טיפה יותר מסובך מזה :slight_smile: ונסביר למה:

כאשר אנחנו מגדירים גודל של תמונה באמצעות em, גודלה תלוי בגודל הפונט. אז אם נשנה את גודל הפונט של ה- div:

#img-div {
   font-size: 32px;
}

#img1 {
   width: 10em;
}

נקבל:

 

 

ואנו רואים שהתמונה גדלה פי 2. הסיבה היא, ש- em שווה לגודל הפונט בפיקסלים.

  • כשאנו לא מגדירים את גודל הפונט בעצמנו, ערכו יהיה 16 פיקסלים, שזו ברירת המחדל. ולכן זה גם יהיה הגודל של 1em. מכאן 10em = 160px.
  • כשאנו מגדירים את גודל הפונט להיות 32 פיקסלים, זה גם הופך להיות גודלו של 1em. מכאן 10em = 320px.

חשוב לציין ששימוש ב- em לא פותר את הבעיה של גודל תמונה קבוע. כל עוד גודל הפונט נשאר קבוע, גודל של תמונה שמוגדר באמצעות em יישאר קבוע גם הוא, לכן ייתכן שהתמונה תהיה גדולה מדי בחלון צר וקטנה מדי בחלון רחב.

הגדרת גודל תמונה באמצעות אחוזים

כאשר מגדירים גודל תמונה באחוזים, זה תמיד ביחס לאלמנט שמכיל אותה. כלומר גודלה בפיקסלים אינו בהכרח קבוע ועשוי להשתנות עבור חלונות ברוחבים שונים.

אם, למשל, נגדיר רוחב של 70%:

#img1 {
   width: 70%;
}

נקבל את התוצאה הזו:

 

 

כעת, אם נרחיב את החלון (ונשאיר את הקוד בדיוק כמו שהוא, ללא כל שינוי):

 

 

אנו רואים שהתמונה גדלה, כך שהיא עדיין תופסת 70% מהאלמנט שמכיל אותה, ובאופן כללי גודלה משתנה עם שינוי גודל החלון.