คุณสมบัติ `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 : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&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="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&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="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</html>

เกี่ยวกับการปรับขนาดวัตถุ

คุณสมบัติ `object-fit`

คุณสมบัติ object-fit ใน CSS ใช้ควบคุมวิธีการจัดวางรูปภาพ วิดีโอ และเนื้อหาอื่นๆ ให้พอดีกับองค์ประกอบของตัวคอนเทนเนอร์ ด้วยการใช้คุณสมบัตินี้ คุณสามารถควบคุมขนาดและการจัดวางขององค์ประกอบต่างๆ ได้อย่างยืดหยุ่นและสวยงาม เป็นคุณสมบัติที่มีประโยชน์มากสำหรับการปรับการแสดงผลของรูปภาพหรือวิดีโอโดยการตัดหรือปรับขนาดเมื่อไม่พอดีกับองค์ประกอบพ่อ

ค่าของ `object-fit`

`fill` (ค่าเริ่มต้น)

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

fill เป็นค่าพื้นฐานที่รูปภาพหรือวิดีโอจะถูกขยายเพื่อให้พอดีกับความกว้างและสูงขององค์ประกอบพ่ออย่างสมบูรณ์ ในกรณีนี้ อัตราส่วนภาพดั้งเดิมจะถูกละเลย ซึ่งอาจทำให้ภาพบิดเบือน

พอดีกับขนาดขององค์ประกอบพ่ออย่างสมบูรณ์
เนื่องจากอัตราส่วนภาพถูกละเลย รูปภาพหรือวิดีโออาจถูกยืดในแนวตั้งหรือแนวนอน

`contain`

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

contain ปรับขนาดเนื้อหาให้พอดีทั้งหมดภายในองค์ประกอบพ่อโดยยังคงรักษาอัตราส่วนภาพเดิม เนื้อหาไม่เกินขนาดขององค์ประกอบพ่อ และอาจมีพื้นที่ว่าง (padding) บนด้านแนวตั้งหรือแนวนอน

เนื้อหาทั้งหมดจะแสดงผล
เพื่อรักษาอัตราส่วนภาพเดิม อาจปรากฏพื้นที่ว่าง (เช่น letterbox หรือ pillarbox effect)

`cover`

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

cover ปรับขนาดเนื้อหาให้คลุมองค์ประกอบพ่ออย่างสมบูรณ์ในขณะรักษาอัตราส่วนภาพ บางส่วนของเนื้อหาอาจถูกตัดออกเพื่อให้พอดีกับองค์ประกอบพ่อ แต่จะเติมเต็มคอนเทนเนอร์ทั้งหมด จึงไม่มีช่องว่างเกิดขึ้น

เนื้อหาครอบคลุมองค์ประกอบพ่ออย่างสมบูรณ์
อาจถูกครอบตัดในขณะที่ยังคงอัตราส่วนภาพเดิม
มักใช้สำหรับภาพพื้นหลังหรือภาพในส่วน hero section

`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: 150px; 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 เป็น property ของ CSS ที่ทรงพลัง ซึ่งช่วยให้คุณควบคุมวิธีการแสดงภาพและวิดีโอเมื่อเปรียบเทียบกับองค์ประกอบตัวแม่บนเว็บเพจได้อย่างยืดหยุ่น โดยใช้ค่าเช่น fill, contain, cover, none และ scale-down คุณสามารถตอบสนองความต้องการในการออกแบบที่หลากหลาย ด้วยการเข้าใจวิธีการใช้ที่ถูกต้องและนำไปประยุกต์ใช้อย่างเหมาะสม คุณจะสามารถสร้างรูปแบบที่ดึงดูดสายตาได้

คุณสมบัติของ `object-position`

คุณสมบัติ object-position ใน CSS ถูกใช้เพื่อควบคุมตำแหน่งของเนื้อหา เช่น ภาพและวิดีโอภายในองค์ประกอบ การใช้ object-position ช่วยให้คุณสามารถจัดตำแหน่งเนื้อหาในจุดที่กำหนดและสร้างเอฟเฟกต์ที่เหมาะสมกับรูปแบบการออกแบบ

ภาพรวมของ `object-position`

object-position ส่วนใหญ่ถูกใช้กับองค์ประกอบสื่อ เช่น <img> และ <video> คุณสมบัตินี้ควบคุมตำแหน่งที่สื่อจะแสดงผลภายในองค์ประกอบตัวแม่ object-fit มักถูกใช้ร่วมกับ object-position โดยที่ object-fit กำหนดวิธีที่ภาพหรือวิดีโอพอดีกับขนาดกรอบ และ object-position ปรับตำแหน่งการแสดงผลของเนื้อหา

วิธีการกำหนดค่า

object-position สามารถระบุตำแหน่งได้โดยใช้ค่า 1, 2 หรือ 4 ค่า อย่างไรก็ตาม การระบุค่าทั้งสี่ค่าอาจไม่ได้รับการรองรับจากเบราว์เซอร์รุ่นเก่า

การระบุค่าหนึ่งค่า

หากกำหนดค่าเพียงค่าเดียว จะถือว่าเป็นการระบุตำแหน่งแนวนอน (แกน X) และตำแหน่งแนวตั้ง (แกน Y) จะถูกตั้งค่าเป็น center โดยอัตโนมัติ

เมื่อกำหนดเป็น object-position: left; วัตถุจะอยู่ทางด้านซ้าย
เมื่อกำหนดเป็น object-position: 70%; วัตถุจะอยู่ที่ 70% ตามแนวนอนและอยู่ตรงกลางตามแนวตั้ง
เมื่อกำหนดเป็น object-position: 50px; วัตถุจะอยู่ห่างจากซ้าย 50px และอยู่ตรงกลางตามแนวตั้ง

การระบุค่าสองค่า

การระบุค่าสองค่าช่วยให้สามารถกำหนดตำแหน่งแนวนอน (แกน X) และแนวตั้ง (แกน Y) ได้แยกกัน

เมื่อกำหนดเป็น object-position: center center; วัตถุจะอยู่ตรงกลาง
เมื่อกำหนดเป็น object-position: right top; วัตถุจะอยู่ตรงมุมขวาบน
เมื่อกำหนดเป็น object-position: 75% 20%; วัตถุจะอยู่ที่ 75% ตามแนวนอนและ 20% ตามแนวตั้ง
เมื่อกำหนดเป็น object-position: 50px 25px; วัตถุจะอยู่ห่างจากซ้าย 50px และจากบน 25px

การระบุค่าทั้งสี่ค่า

โดยการระบุค่าทั้งสี่ค่า คุณสามารถตั้งค่าตำแหน่งได้อย่างละเอียดโดยใช้คีย์เวิร์ด เช่น left หรือ top พร้อมกับค่า offset

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;

เมื่อกำหนดเป็น object-position: left 10px top 20px; วัตถุจะอยู่ห่างจากซ้าย 10px และจากบน 20px
เมื่อกำหนดเป็น object-position: right 15% bottom 30px; วัตถุจะอยู่ห่างจากขวา 15% และจากล่าง 30px

รูปแบบการกำหนดค่า

object-position สามารถรองรับรูปแบบค่าดังต่อไปนี้

คุณสามารถระบุคีย์เวิร์ด เช่น top, right, bottom, left และ center ได้
คุณยังสามารถระบุค่าเป็นเปอร์เซ็นต์ เช่น 50% หรือใช้หน่วยอย่างเช่น px ได้

ตัวอย่างเช่น คุณสามารถใช้รูปแบบดังนี้

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: right bottom;
4}

ในตัวอย่างนี้ รูปภาพจะแผ่ขยายทั่วทั้งคอนเทนเนอร์ และแสดงเนื้อหาในส่วนล่างขวา

ตัวอย่างที่ผสมผสานกับค่า `object-fit`

คุณสามารถระบุค่าต่างๆ ต่อไปนี้สำหรับ object-fit ได้

fill: รูปภาพอาจถูกบิดเบือน แต่จะพอดีกับคอนเทนเนอร์ทั้งหมด
contain: แสดงรูปภาพทั้งหมดพร้อมรักษาสัดส่วนเดิม
cover: ครอบรูปภาพให้พอดีกับคอนเทนเนอร์พร้อมรักษาสัดส่วนเดิม
none: แสดงรูปภาพในขนาดเดิม

ตัวอย่างเช่น การใช้ object-fit: contain จะทำให้ภาพทั้งหมดแสดงผลและจัดตำแหน่งภาพตามค่าที่กำหนดใน object-position

1img {
2    object-fit: contain;
3    object-position: right;
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 ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ `overflow` และ `contain`คุณสมบัติ CSS ที่เกี่ยวข้องกับความโปร่งใส

คุณสมบัติ `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`