`object-fit` at `object-position` na mga Katangian

Articles

Ipinaliliwanag ng artikulong ito ang object-fit at object-position na mga katangian.

Maaari kang matuto kung paano ayusin ang mga bagay tulad ng mga larawan at video at kung paano ito isulat sa CSS.

YouTube Video

HTML para sa Preview

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>

Kaugnay ng Pag-aangkop ng Bagay

Katangian ng `object-fit`

Ang CSS na katangian ng object-fit ay pangunahing ginagamit upang kontrolin kung paano babagay ang mga larawan, video, at iba pang nilalaman sa kanilang mga container na elemento. Sa paggamit ng katangiang ito, maaari mong flexible na tukuyin kung paano i-resize at maganda ang pagkaka-posisyon ng mga tukoy na elemento. Napakakapalad para sa pag-aayos ng pagpapakita ng larawan o video sa pamamagitan ng pag-trim o pag-scale kapag hindi sila umaangkop sa parent na elemento.

Mga Halaga ng `object-fit`

`fill` (Kusa o Default na Halaga)

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

Fill ang default na halaga, kung saan ang mga larawan o video ay sapilitang iniunat upang ganap na bumagay sa lapad at taas ng parent na elemento. Sa kasong ito, ang orihinal na proporsyon ng larawan ay binabalewala, na maaaring magdulot ng distortion ng larawan.

Ganap itong naaayon sa sukat ng parent na elemento.
Dahil binabalewala ang aspect ratio, maaaring maiunat ang mga larawan o video nang patayo o pahalang.

`contain`

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

Ang contain ay ina-adjust ang sukat ng nilalaman upang ganap itong babagay sa loob ng parent na elemento habang pinapanatili ang aspect ratio. Hindi nito lalampasan ang sukat ng parent na elemento, at maaaring may padding sa alinman sa patayo o pahalang na bahagi.

Lahat ng nilalaman ay ipinapakita.
Upang mapanatili ang orihinal na aspect ratio, maaaring lumitaw ang padding (letterbox o pillarbox na epekto).

`cover`

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

Ang cover ay ino-adjust ang sukat ng nilalaman upang ganap na takpan ang parent na elemento habang pinapanatili ang aspect ratio. Maaaring i-trim ang ilang nilalaman upang bumagay sa parent na elemento, ngunit ang buong elemento ay pinupuno ang container kaya walang agwat.

Ganap na tinatakpan ng nilalaman ang parent na elemento.
Maaring maputol habang pinapanatili ang orihinal na aspect ratio.
Karaniwang ginagamit para sa mga background image o mga larawan sa hero section.

`none`

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

Ipinapakita ng none ang mga imahe o video sa kanilang orihinal na laki at aspect ratio. Hindi ito nag-a-adjust upang magkasya sa laki ng parent element at ang nilalaman ay lumalagpas kung kinakailangan.

Ang orihinal na laki ng nilalaman ay pinapanatili.
Walang pagbabago sa laki upang magkasya ang nilalaman sa parent element.

`scale-down`

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

Ang scale-down ay isang halaga na pinagsasama ang kilos ng none at contain. Kung ang nilalaman ay kasya sa parent element, ito ay kumikilos tulad ng none, ngunit kung masyadong malaki ang nilalaman, ginagamit nito ang kilos ng contain at inaangkop upang magkasya.

Ang nilalaman ay pinaliit kung ito ay mas malaki kaysa sa parent element.
Ipinapakita ito sa orihinal nitong laki kung mas maliit ito.

Halimbawa ng Paggamit

Pag-aangkop ng mga Background Image sa Parent Element

Halimbawa, upang ipalaganap ang isang larawan sa buong screen na may isinusunod na responsive design, karaniwang ginagamit ang cover. Ang sumusunod na code ay isang halimbawa ng pag-aangkop ng larawan nang mahigpit sa parent element, kahit na maputol ito.

 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>

Sa kasong ito, ang larawan ay ganap na sumasakop sa parent element, pinapanatili ang magandang layout sa anumang laki ng screen. Kung magkaiba ang aspect ratio, maaaring hindi makita ang ilang bahagi ng larawan, ngunit nakamit nito ang presentasyong angkop sa disenyo.

Pagpapakita ng mga larawan habang pinapanatili ang aspect ratio

Susunod, kung nais mong magkasya ang buong larawan sa parent element habang pinapanatili ang aspect ratio, angkop ang 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>

Sa halimbawang ito, ang larawan ay pinaliit upang magkasya sa lalagyan, na nagreresulta sa kaunting padding, ngunit ang orihinal na larawan ay ipinapakita nang walang pagbaluktot.

Karaniwang pagkakamali

Isang karaniwang pagkakamali sa paggamit ng object-fit ay hindi pagtatakda ng laki ng parent element. Ang object-fit ay isang katangiang ginagamit upang ang nilalaman ay magkasyang mabuti sa parent element, kaya kung ang laki ng parent element ay hindi malinaw, hindi makakamit ang inaasahang epekto. Siguraduhin na ang parent element ay may wastong itinakdang width o height.

Halimbawa, sa sumusunod na code, ang taas ng parent element ay hindi tinukoy, kaya ang object-fit ay hindi gumagana tulad ng inaasahan.

 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>

Sa kasong ito, kailangan mong tukuyin ang taas ng parent element o ayusin ang buong layout gamit ang flexbox o grid layout.

Mga sitwasyon kung saan dapat gamitin ang `object-fit`

object-fit ay mahalaga, lalo na sa mga responsive na disenyo at mga website na tumutugon sa iba't-ibang laki ng screen. Halimbawa, ito ay kapaki-pakinabang sa mga sumusunod na sitwasyon:.

Kapag nais mong iakma ang mga larawan o video upang maipakita nang tama sa iba't-ibang mga device
Kapag nais mong ipakita ang mga background na larawan o katulad nito sa full screen habang pinapayagan ang pagputol
Kapag nais mong iakma ang isang larawan sa isang parent na elemento habang pinapanatili ang proporsyon nito
Kapag nais mong magpakita ng pare-parehong laki ng mga larawan, tulad sa mga galeriya

Ang paggamit ng object-fit sa mga sitwasyong ito ay makakapagpanatili ng pagkakapareho sa disenyo at makakapagpabuti ng karanasan ng gumagamit.

Buod

Ang object-fit ay isang makapangyarihang CSS property na nagbibigay-daan sa iyo na kontrolin nang malaya kung paano ipinapakita ang mga larawan at video kaugnay sa kanilang mga parent na elemento sa isang web page. Sa paggamit ng iba't-ibang halaga tulad ng fill, contain, cover, none, at scale-down, maaari mong matugunan ang iba't ibang mga kinakailangan sa disenyo. Sa pag-unawa kung paano ito tama gamitin at sa angkop na aplikasyon, maaari kang makalikha ng mga layout na kaakit-akit sa paningin.

Magsanay sa paggamit ng object-fit upang lumikha ng mga responsive at kaaya-ayang disenyo.

Ari-arian ng `object-position`

Ang CSS na ari-arian ng object-position ay ginagamit upang kontrolin ang pagpoposisyon ng nilalaman tulad ng mga larawan at video sa loob ng isang elemento. Sa pamamagitan ng paggamit ng object-position, maaari mong iposisyon ang nilalaman sa partikular na mga punto at magbigay ng mga visual na epekto na angkop sa layout.

Pangkalahatang-ideya ng `object-position`

Ang object-position ay pangunahing ginagamit sa mga media na elemento tulad ng <img> at <video> na mga tag. Ang ari-arian na ito ay kumokontrol kung saan sa loob ng lalagyan naka-display ang media. Kadalasang ginagamit ang object-fit kasabay ng object-position, kung saan ang object-fit ay nagtatakda kung paano akma ang larawan o video sa sukat ng frame, at ang object-position ay inaayos ang posisyon ng ipinapakitang nilalaman.

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

Sa halimbawang ito, ang larawan ay ini-scale upang magkasya sa lalagyan (object-fit: cover), at ipinosisyon upang maipakita ang sentro nito (object-position: center).

Paano I-tukoy ang Mga Halaga

Ang object-position ay tinutukoy gamit ang dalawang halaga tulad ng sumusunod.

Pahalang na posisyon (X-axis)
Patayong posisyon (Y-axis)

Format ng Pagtukoy ng Halaga

Sa object-position, maaari mong tukuyin ang mga halaga gamit ang sumusunod na format.

Mga Keyword: top, right, bottom, left, center
Porsyento: 0% hanggang 100%
Mga unit ng haba: px, em, rem, atbp.

Halimbawa, maaari mo itong gamitin nang ganito.

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

Kombinasyon ng Mga Keyword at Porsyento

Posible rin na paghaluin ang mga keyword at porsyento.

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

Sa halimbawang ito, ang imahe ay inilagay sa kanang gilid, at nakasentro nang patayo sa 50%. Ang kombinasyon na ito ay napaka-kapaki-pakinabang kapag kinakailangan ang flexible na pagpoposisyon.

Kombinasyon sa `object-fit`

Ang object-position ay madalas ginagamit kasabay ng object-fit. Tinutukoy ng object-fit kung paano ni-re-resize ang isang imahe o video kaugnay sa frame nito. Halimbawa, ang paggamit ng object-fit: cover ay nagtatabas ng imahe upang magkasya sa frame at ito ay ipinoposisyon alinsunod sa tinukoy na object-position.

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

Sa halimbawang ito, ang imahe ay kumakalat sa buong lalagyan, na nagpapakita ng bahagi sa ilalim na kanan ng nilalaman.

Mga Halimbawa na Pinagsama sa Mga Halaga ng `object-fit`

fill: Maaaring ma-deform ang imahe, ngunit magkasya ito sa buong lalagyan.
contain: Ang buong imahe ay ipinapakita habang pinapanatili ang tamang aspect ratio.
cover: Tinabas upang magkasya sa lalagyan, habang pinapanatili ang tamang aspect ratio.
none: Ang imahe ay ipinapakita sa orihinal nitong sukat.

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

Sa setting na ito, inilagay ang imahe sa itaas ng lalagyan, at ang buong imahe ay ipinapakita.

Advanced na Paggamit

Ang object-position ay maaaring gamitin sa iba't ibang sitwasyon hindi lamang para sa simpleng pag-aayos ng posisyon kundi upang mapahusay din ang mga visual effect.

Pagbibigay-diin sa Bahagi ng Imahe

Ito ay kapaki-pakinabang kung nais mong mag-focus sa isang partikular na bahagi ng imahe sa halip na ipakita ang buong imahe. Itakda ang object-fit sa cover at gamitin ang object-position upang mag-focus sa isang partikular na lugar.

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

Sa halimbawang ito, ang ilalim na kaliwang bahagi ng imahe ay ipinapakita, na nagbibigay-diin sa mahahalagang bahagi.

Kapag Ginagamit ang Video bilang Background

Ang object-position ay kapaki-pakinabang rin kapag gumagamit ng video bilang background. Maaari mong ilagay ang video sa isang tiyak na lokasyon upang mapanatili ang pagkakapare-pareho sa pangkalahatang disenyo ng pahina.

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

Sa setting na ito, ang video ay tumutugma sa buong pahina at inilalagay sa itaas na gitna.

Karaniwang Mga Problema at Solusyon

Maaaring may ilang mga problema sa paggamit ng object-position. Dito, ipinapakilala namin ang karaniwang mga problema at ang kanilang mga solusyon.

Ang bahagi ng imahe ay naputol

Kapag ginagamit ang object-fit: cover, maaaring maputol ang imahe upang magkasya sa lalagyan. Sa kasong ito, sa pamamagitan ng pag-aayos ng posisyon gamit ang object-position, maaari mong tiyakin na ang mahahalagang bahagi ay makikita.

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

Ang posisyon ng imahe ay hindi ayon sa inaasahan

Ang mga porsyentong spesipikasyon ay maaaring hindi laging intuitive. Kinakailangan na isaalang-alang ang laki ng lalagyan at ang aspect ratio nito at subukan ang iba't ibang mga halaga. Ang paggamit ng developer tools upang ayusin in real-time ay epektibo.

Buod

Ang object-position ay isang makapangyarihang tool para sa malayang pagpoposisyon ng mga elementong media. Sa pamamagitan ng pagsasama nito sa object-fit, maaaring makamit ang mga flexible na layout na akma sa disenyo. Pagbutihin ang kaalaman sa mga keywords, porsyento, at mga unit ng haba upang mapakinabangan ang visual na epekto sa iba't ibang sitwasyon.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video

`overflow` at `contain` na Mga Katangian

`object-fit` at `object-position` na mga Katangian

YouTube Video

HTML para sa Preview

Kaugnay ng Pag-aangkop ng Bagay

Katangian ng object-fit

Mga Halaga ng object-fit

fill (Kusa o Default na Halaga)

contain

cover

none

scale-down

Halimbawa ng Paggamit

Pag-aangkop ng mga Background Image sa Parent Element

Pagpapakita ng mga larawan habang pinapanatili ang aspect ratio

Karaniwang pagkakamali

Mga sitwasyon kung saan dapat gamitin ang object-fit

Buod

Ari-arian ng object-position

Pangkalahatang-ideya ng object-position

Paano I-tukoy ang Mga Halaga

Format ng Pagtukoy ng Halaga

Kombinasyon ng Mga Keyword at Porsyento

Kombinasyon sa object-fit

Mga Halimbawa na Pinagsama sa Mga Halaga ng object-fit

Advanced na Paggamit

Pagbibigay-diin sa Bahagi ng Imahe

Kapag Ginagamit ang Video bilang Background

Karaniwang Mga Problema at Solusyon

Ang bahagi ng imahe ay naputol

Ang posisyon ng imahe ay hindi ayon sa inaasahan

Buod

YouTube Video

Katangian ng `object-fit`

Mga Halaga ng `object-fit`

`fill` (Kusa o Default na Halaga)

`contain`

`cover`

`none`

`scale-down`

Mga sitwasyon kung saan dapat gamitin ang `object-fit`

Ari-arian ng `object-position`

Pangkalahatang-ideya ng `object-position`

Kombinasyon sa `object-fit`

Mga Halimbawa na Pinagsama sa Mga Halaga ng `object-fit`