ישנן שיטות רבות למקם את התמונה ב-CSS, כגון שימוש ב- מיקום אובייקט נכס, באמצעות ה לָצוּף מאפיין (ליישור האלמנטים לשמאל או לימין).
על ידי שימוש במאפיין מיקום אובייקט
ה מיקום אובייקט מאפיין ב-CSS מציין את היישור של התוכן בתוך המכולה. הוא משמש עם התאמה לאובייקט תכונה כדי להגדיר כיצד אלמנט אוהב או ממוקם עם קואורדינטות x/y בתיבת התוכן שלו.
בעת שימוש ב התאמה לאובייקט מאפיין, ערך ברירת המחדל עבור מיקום אובייקט הוא 50% 50% , לכן, כברירת מחדל, כל התמונות ממוקמות במרכז תיבת התוכן שלהן. אנו יכולים לשנות את יישור ברירת המחדל באמצעות ה מיקום אובייקט תכונה.
תחביר
object-position: | initial | inherit;
ה עמדה הערך של מיקום אובייקט מאפיין מגדיר את המיקום של וידאו או תמונה בתוך המיכל. הוא מקבל שני ערכים מספריים, כאשר הערך הראשון שולט על ציר ה-x, והערך השני שולט על ציר ה-y. אנחנו יכולים להשתמש במחרוזת כגון שמאל, ימין , או מֶרְכָּז וכו' למיקום התמונה במיכל. זה מאפשר ערכים שליליים.
אנו יכולים להבין זאת בצורה ברורה יותר על ידי שימוש בכמה דוגמאות.
לצוף למיתר
דוגמא
בדוגמה זו, אנו משתמשים בערכי המחרוזת כגון 'מימין למעלה', 'מרכז למעלה', ו 'למעלה משמאל' כדי למקם את התמונה.
CSS object-position property #center { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: center top; } #left { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: left top; } #right { width: 400px; height: 150px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: right top; } <h3>object-position: center top;</h3> <h3>object-position: left top;</h3> <h3>object-position: right top;</h3> בדוק את זה עכשיו תְפוּקָה
כעת, יש דוגמה נוספת לשימוש ב- מיקום אובייקט תכונה.
דוגמא
בדוגמה זו, אנו משתמשים ב- התחלתי ערך שממקם את התמונה למרכזה. זה בגלל שהראשיונית מגדירה את המאפיין לערך ברירת המחדל שלו, כלומר 50% 50% . אנו משתמשים גם בערכים המספריים 200 פיקסלים ו 100 פיקסלים .
bash מפוצל מחרוזת לפי תוחם
CSS object-position property #num { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: 200px 100px; } #init { width: 400px; height: 250px; border: 5px solid red; background-color: lightgreen; object-fit: none; object-position: initial; } <h3>object-position: 200px 100px;</h3> <h3>object-position: initial;</h3> בדוק את זה עכשיו תְפוּקָה
על ידי שימוש בנכס הצוף
מאפיין ה-CSS float הוא מאפיין מיקום המשמש לדחיפת אלמנט שמאלה או ימינה, ומאפשר לאלמנטים אחרים לעטוף אותו. בדרך כלל, הוא משמש עם תמונות ופריסות.
אלמנטים מרחפים רק אופקית. אז אפשר רק לצוף אלמנטים שמאלה או ימינה, לא למעלה או למטה. ניתן להזיז אלמנט צף שמאלה או ימינה ככל האפשר. פשוט, זה אומר שאלמנט צף יכול להופיע בקצה השמאלי או הימני הקיצוני.
בואו ניקח דוגמה לשימוש ב- לָצוּף תכונה.
דוגמא
CSS float property #left { float: left; } #right { float: right; } בדוק את זה עכשיו תְפוּקָה
