תכונות `object-fit` ו-`object-position`

Articles

מאמר זה מסביר את תכונות object-fit ו-object-position.

תוכלו ללמוד כיצד לסדר אובייקטים כמו תמונות וסרטונים וכיצד לכתוב אותם ב-CSS.

YouTube Video

HTML לתצוגה מקדימה

css-object-fit-position.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit</h3>
 23            <section style="width: 100%; height: 300px;">
 24                <header><h4>object-fit: fill</h4></header>
 25                <section class="sample-view" style="width: 100px; height: 100px;">
 26                    <img class="object-fit-fill" src="example.jpg" alt="Example Image">
 27                </section>
 28                <header><h4>object-fit: contain</h4></header>
 29                <section class="sample-view" style="width: 100px; height: 100px;">
 30                    <img class="object-fit-contain" src="example.jpg" alt="Example Image">
 31                </section>
 32                <header><h4>object-fit: cover</h4></header>
 33                <section class="sample-view" style="width: 100px; height: 100px;">
 34                    <img class="object-fit-cover" src="example.jpg" alt="Example Image">
 35                </section>
 36                <header><h4>object-fit: none</h4></header>
 37                <section class="sample-view" style="width: 100px; height: 100px;">
 38                    <img class="object-fit-none" src="example.jpg" alt="Example Image">
 39                </section>
 40                <header><h4>object-fit: scale-down</h4></header>
 41                <section class="sample-view" style="width: 100px; height: 100px;">
 42                    <img class="object-fit-scale-down" src="example.jpg" alt="Example Image">
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : cover</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.background-image-cover img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: cover;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;background-image-cover&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="image-container-cover">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : contain</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.background-image-contain img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: contain;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;background-image-contain&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="image-container-contain">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit Common Mistake Example</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.image-container-invalid {
102    width: 100%;
103    height: auto;
104    /* height: 500px; The height of the parent element is not specified */
105}
106
107.image-container-invalid img {
108    object-fit: cover;
109}
110</pre>
111                <header><h4>HTML</h4></header>
112<pre>
113&lt;div class=&quot;background-image-invalid&quot;&gt;
114    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
115&lt;/div&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <div class="image-container-invalid">
120                        <img src="example.jpg" alt="Example Image">
121                    </div>
122                </section>
123            </section>
124        </article>
125        <article>
126            <h3>object-position</h3>
127            <section style="width: 100%; height: 200px;">
128                <header><h4>object-fit: cover; object-position: center;</h4></header>
129                <section class="sample-view" style="width: 100px; height: 100px;">
130                    <img class="object-position-center" src="example.jpg" alt="Example Image">
131                </section>
132                <header><h4>object-position: 50% 50%</h4></header>
133                <section class="sample-view" style="width: 100px; height: 100px;">
134                    <img class="object-position-50-50" src="example.jpg" alt="Example Image">
135                </section>
136                <header><h4>object-position: left top</h4></header>
137                <section class="sample-view" style="width: 100px; height: 100px;">
138                    <img class="object-position-left-top" src="example.jpg" alt="Example Image">
139                </section>
140                <header><h4>object-position: right 50%</h4></header>
141                <section class="sample-view" style="width: 100px; height: 100px;">
142                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
143                </section>
144                <header><h4>object-fit: cover; object-position: bottom right;</h4></header>
145                <section class="sample-view" style="width: 100px; height: 100px;">
146                    <img class="object-position-bottom-right" src="example.jpg" alt="Example Image">
147                </section>
148                <header><h4>object-fit: contain; object-position: top;</h4></header>
149                <section class="sample-view" style="width: 100px; height: 100px;">
150                    <img class="object-position-top" src="example.jpg" alt="Example Image">
151                </section>
152                <header><h4>object-fit: cover; object-position: 25% 75%;</h4></header>
153                <section class="sample-view" style="width: 100px; height: 100px;">
154                    <img class="object-position-25-75" src="example.jpg" alt="Example Image">
155                </section>
156                <header><h4>object-fit: cover; object-position: center top;</h4></header>
157                <section class="sample-view" style="width: 100px; height: 100px;">
158                    <img class="object-position-center-top" src="example.jpg" alt="Example Image">
159                </section>
160            </section>
161        </article>
162    </main>
163</body>
164</html>

קשור להתאמת אובייקט

תכונת `object-fit`

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

ערכים של `object-fit`

`fill` (ערך ברירת מחדל)

1img {
2  object-fit: fill;
3}

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

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

`contain`

1img {
2  object-fit: contain;
3}

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

כל התוכן מוצג.
כדי לשמור על יחס הממדים המקורי, עשוי להופיע ריפוד (אפקט letterbox או pillarbox).

`cover`

1img {
2  object-fit: cover;
3}

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

התוכן מכסה לחלוטין את רכיב האב.
זה עשוי להיות חתוך תוך שמירה על יחס הממדים המקורי.
משמש בדרך כלל לתמונות רקע או לתמונות בחלק ההרואי של הדף.

`none`

1img {
2  object-fit: none;
3}

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

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

`scale-down`

1img {
2  object-fit: scale-down;
3}

scale-down הוא ערך המשלב את ההתנהגות של none ו-contain. אם התוכן מתאים למרכיב האב, הוא מתנהג כמו none, אך אם התוכן גדול מדי, הוא מתנהג לפי contain ומותאם לגודל.

התוכן מוקטן אם הוא גדול יותר ממרכיב האב.
התוכן מוצג בגודלו המקורי אם הוא קטן יותר.

שימוש לדוגמה

התאמת תמונות רקע למרכיב האב

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

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

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

הצגת תמונות תוך שמירה על יחס הממדים

בהמשך, אם ברצונך להתאים את כל התמונה למרכיב האב תוך שמירה על יחס הממדים שלה, contain מתאים.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

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

טעויות נפוצות

טעות נפוצה בשימוש ב-object-fit היא אי הגדרת גודל מרכיב האב. object-fit הוא מאפיין להתאמת תוכן למרכיב האב, כך שאם גודל מרכיב האב אינו מוגדר, לא תתקבל התוצאה הרצויה. ודא שלמרכיב האב יש width או height מוגדרים כראוי.

לדוגמה, בקוד הבא, גובה מרכיב האב אינו מוגדר, ולכן object-fit אינו פועל כמתוכנן.

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 500px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

במקרה זה, יש להגדיר את גובה מרכיב האב או להתאים את כל הפריסה באמצעות flexbox או grid layout.

מצבים שבהם כדאי להשתמש ב-`object-fit`

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

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

שימוש ב-object-fit במצבים אלו יכול לשמור על עקביות בעיצוב ולשפר את חוויית המשתמש.

סיכום

object-fit הוא תכונה עוצמתית ב-CSS שמאפשרת שליטה גמישה על אופן הצגת תמונות וסרטונים ביחס לאלמנטים ההורים שלהם בדף אינטרנט. על ידי שימוש בערכים שונים כמו fill, contain, cover, none, ו-scale-down, ניתן לעמוד בדרישות עיצוב שונות. על ידי הבנת השימוש הנכון והחלה נכונה, ניתן להגיע לפריסות עיצוב מרשימות ויזואלית.

שלוט בשימוש ב-object-fit כדי ליצור עיצובים רספונסיביים ונעימים לעין.

תכונת `object-position`

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

סקירה כללית של `object-position`

object-position מיושמת בעיקר על אלמנטים של מדיה כמו תגים <img> ו-<video>. תכונה זו שולטת במיקום המדיה בתוך האלמנט המארח שלה. object-fit משמשת לעיתים קרובות בשילוב עם object-position, כאשר object-fit מגדירה כיצד תמונה או סרטון יתאימו לגודל המסגרת, ו-object-position מתאימה את מיקום התוכן.

1img {
2    object-fit: cover;
3    object-position: center;
4}

בדוגמה זו, התמונה מותאמת לגודל המארח (object-fit: cover), וממוקמת כך שמרכזה מוצג (object-position: center).

איך לציין ערכים

object-position מוגדרת באמצעות שני ערכים כפי שמוצג להלן.

מיקום אופקי (ציר ה-X)
מיקום אנכי (ציר ה-Y)

פורמט הגדרת הערכים

ב-object-position, ניתן לציין ערכים בפורמט הבא.

מילות מפתח: למעלה, ימין, למטה, שמאל, מרכז
אחוזים: 0% עד 100%
יחידות אורך: px, em, rem וכדומה

לדוגמה, ניתן להשתמש בזה כך.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}

שילוב מילות מפתח ואחוזים

ניתן גם לשלב בין מילות מפתח ואחוזים.

1img {
2    object-position: right 50%;
3}

בדוגמה זו, התמונה ממוקמת בקצה הימני וממוקדת אנכית ב-50%. שילוב זה שימושי מאוד כאשר נדרשת מיקום גמיש.

שילוב עם `object-fit`

object-position משמש לעיתים קרובות יחד עם object-fit. object-fit קובע כיצד תמונה או וידאו מותאמים לגודל המסגרת שלהם. לדוגמה, שימוש ב-object-fit: cover חותך את התמונה כדי להתאים אותה לגודל המסגרת וממקם אותה לפי object-position שנקבע.

1img {
2    object-fit: cover;
3    object-position: bottom right;
4}

בדוגמה זו, התמונה מכסה את כל המיכל ומציגה את החלק התחתון הימני של התוכן.

דוגמאות המשולבות עם ערכים של `object-fit`

fill: התמונה עשויה להתעוות, אך היא מתאימה לכל המיכל.
contain: התמונה כולה מוצגת תוך שמירה על יחס הממדים.
cover: נחתכת כדי להתאים למיכל, תוך שמירה על יחס הממדים.
none: התמונה מוצגת בגודלה המקורי.

1img {
2    object-fit: contain;
3    object-position: top;
4}

בהגדרה זו, התמונה ממוקמת בחלקו העליון של המיכל וכל התמונה מוצגת.

שימוש מתקדם

object-position יכול לשמש במגוון תרחישים, לא רק לשינויים פשוטים במיקום אלא גם כדי לשפר אפקטים ויזואליים.

הדגשת חלק מסוים בתמונה

זה שימושי כאשר רוצים להתמקד בחלק מסוים בתמונה במקום להציג את כולה. קבעו את object-fit ל-cover והשתמשו ב-object-position כדי להתמקד באזור מסוים.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}

בדוגמה זו, מוצג החלק התחתון השמאלי של התמונה, תוך דגש על חלקים חשובים.

כאשר משתמשים בווידאו כרקע

object-position שימושי גם כאשר משתמשים בווידאו כרקע. ניתן למקם את הווידאו במיקום מסוים כדי לשמור על עקביות עם עיצוב הדף הכולל.

1video {
2    object-fit: cover;
3    object-position: center top;
4}

במצב זה, הווידאו מתאים לכל הדף וממוקם במרכז העליון.

בעיות נפוצות ופתרונות

ייתכן שיהיו כמה בעיות בעת שימוש ב-object-position. כאן, נציג בעיות נפוצות ופתרונותיהן.

חלק מהתמונה נחתך

בעת שימוש ב-object-fit: cover, ייתכן שהתמונה תיחתך כדי להתאים למיכל. במקרה זה, על ידי התאמת מיקום התצוגה באמצעות object-position, ניתן להבטיח שחלקים חשובים יוצגו.

1img {
2    object-fit: cover;
3    object-position: center;
4}

מיקום התמונה אינו כפי שציפיתם

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

סיכום

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

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תכונות `overflow` ו- `contain`

תכונות `object-fit` ו-`object-position`

YouTube Video

HTML לתצוגה מקדימה

קשור להתאמת אובייקט

תכונת object-fit

ערכים של object-fit

fill (ערך ברירת מחדל)

contain

cover

none

scale-down

שימוש לדוגמה

התאמת תמונות רקע למרכיב האב

הצגת תמונות תוך שמירה על יחס הממדים

טעויות נפוצות

מצבים שבהם כדאי להשתמש ב-object-fit

סיכום

תכונת object-position

סקירה כללית של object-position

איך לציין ערכים

פורמט הגדרת הערכים

שילוב מילות מפתח ואחוזים

שילוב עם object-fit

דוגמאות המשולבות עם ערכים של object-fit

שימוש מתקדם

הדגשת חלק מסוים בתמונה

כאשר משתמשים בווידאו כרקע

בעיות נפוצות ופתרונות

חלק מהתמונה נחתך

מיקום התמונה אינו כפי שציפיתם

סיכום

YouTube Video

תכונת `object-fit`

ערכים של `object-fit`

`fill` (ערך ברירת מחדל)

`contain`

`cover`

`none`

`scale-down`

מצבים שבהם כדאי להשתמש ב-`object-fit`

תכונת `object-position`

סקירה כללית של `object-position`

שילוב עם `object-fit`

דוגמאות המשולבות עם ערכים של `object-fit`