คุณสมบัติ `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 ปรับขนาดเนื้อหาให้พอดีทั้งหมดภายในองค์ประกอบพ่อโดยยังคงรักษาอัตราส่วนภาพเดิม เนื้อหาไม่เกินขนาดขององค์ประกอบพ่อ และอาจมีพื้นที่ว่าง (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: 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 เป็น property ของ 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 ถูกกำหนดด้วยค่า 2 ค่า ดังนี้

ตำแหน่งแนวนอน (แกน X)
ตำแหน่งแนวตั้ง (แกน Y)

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

ใน object-position คุณสามารถกำหนดค่าในรูปแบบต่อไปนี้

คำสำคัญ: top, right, bottom, left, center
เปอร์เซ็นต์: 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 ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

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`