כיצד להגדיר את המיקום של תמונה ב-CSS?

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

- שימוש בנכס צף
- שימוש במאפיין מיקום אובייקט

כיצד להגדיר את המיקום של תמונה ב-CSS?

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

שיטה 1: שימוש בנכס צף

ה ' לָצוּף ' מאפיין מסופק על ידי ה-CSS להעברת רכיבי HTML ב-' שמאלה ' או ' ימין ' כיוון. הוא משמש בעיקר בעת יצירת הפריסה הרספונסיבית למיקום מדויק של רכיבי HTML.

לדוגמה, המאפיין 'float' משמש ליישור תמונות הן בצד שמאל והן בצד ימין של דף האינטרנט:

< div >
< img src = 'bg.jpg' גוֹבַה = '300 פיקסלים' רוֹחַב = '400 פיקסלים' מעמד = 'עמדה נכון' >
< img src = 'book.jpg' גוֹבַה = '300 פיקסלים' רוֹחַב = '400 פיקסלים' מעמד = 'עמדה שמאלה' >
div >

בקוד למעלה:

- ראשית, השורש ' div נוצר אלמנט שפועל כמיכל לרכיבי HTML.
- לאחר מכן, שניים' ' תגיות משמשות בתוך '
  'תג.
- לאחר מכן, הערכים של ' 300 פיקסלים ' ו' 400 פיקסלים ' מסופקים ל' גוֹבַה ' ו' רוֹחַב ' תכונות של שניהם ' ' תגיות.
- כמו כן, הקצה כיתה של ' מיקום נכון ' ו' מיקום שמאלה ' לתג ' ' הראשון והשני, בהתאמה.

כעת, הזן את ' <סגנון> ' תג כדי להחיל את מאפייני ה-CSS הבאים:

< סִגְנוֹן >
.positionRight {
לצוף: ימינה;
}
.positionLeft {
לצוף: שמאל;
}
סִגְנוֹן >

התיאור ניתן להלן:

- ראשית, בחר את ' מיקום נכון ' מחלקה והגדר את הערך של ' ימין 'ל' שלו לָצוּף ' תכונה. זה מעביר את רכיב ה-HTML שנבחר בכיוון הנכון בדף האינטרנט.
- לאחר מכן, בחר את ' מיקום שמאלה ' מחלקה וספק את הערך של ' שמאלה ' אל ה ' לָצוּף ' תכונה. זה מזיז את האלמנט לנוע לצד שמאל.

לאחר סיום שלב ההידור:

הפלט מראה שהתמונות הוגדרו למיקום שמאל וימין.

שיטה 2: שימוש במאפיין מיקום אובייקט

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

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

< סִגְנוֹן >
.ערכים מספריים
{
מיקום אובייקט: 100px 20px;
}
.keywordValues
{
מיקום אובייקט: שמאל;
}
סִגְנוֹן >
< גוּף >
< div >
< img src = 'book.jpg' גוֹבַה = '300 פיקסלים' רוֹחַב = '400 פיקסלים' מעמד = 'ערכי מילת מפתח' >
< img src = 'bg.jpg' גוֹבַה = '300 פיקסלים' רוֹחַב = '400 פיקסלים' מעמד = 'ערכים מספריים' >
div >
גוּף >

בקטע הקוד שלמעלה:

- קודם ה ' ערכים מספריים ' הכיתה נבחרה בתוך ' <סגנון> 'תג. והערכים המספריים של ' 100 פיקסלים 20 פיקסלים ' מסופקים ל-CSS ' מיקום אובייקט ' תכונה. ה ' 100 פיקסלים ' הוא הרווח שנוסף בכיוון האופקי וה' 20 פיקסלים 'עבור האנכי.
- לאחר מכן, ה' מילות מפתח נבחרה הכיתה וערך מילת המפתח של ' שמאלה ' מסופק ל' מיקום אובייקט ' מאפיין ליישור התמונה לכיוון שמאל.
- לאחר מכן, בתוך ' <גוף> 'תייג שתי תמונות נוצרות, והשיעורים שנוצרו לעיל מוקצים להן.

לאחר סיום שלב ההידור, דף האינטרנט מופיע כך:

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

סיכום

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

כיצד להגדיר את המיקום של תמונה ב-CSS?