Articles
CSS'e Giriş
`object-fit` ve `object-position` Özellikleri

`object-fit` ve `object-position` Özellikleri

Bu makale, object-fit ve object-position özelliklerini açıklamaktadır.

Görüntü ve video gibi nesneleri nasıl düzenleyeceğinizi ve bunları CSS'de nasıl yazacağınızı öğrenebilirsiniz.

YouTube Video

Önizleme için 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>

Nesne Uydurma ile İlgili

object-fit Özelliği

CSS object-fit özelliği, görüntülerin, videoların ve diğer içeriklerin taşıyıcı elemanlarına nasıl sığacağını kontrol etmek için kullanılır. Bu özellik sayesinde belirtilen elemanların nasıl yeniden boyutlandırılacağı ve estetik olarak nasıl konumlandırılacağı esnek bir şekilde belirlenebilir. Görüntü veya videolarda, üst elemanın içine sığmadığında kırpma veya ölçeklendirme yaparak görüntü ayarı yapmak için çok kullanışlıdır.

object-fit Değerleri

fill (Varsayılan Değer) 
1img {
2  object-fit: fill;
3}

fill, varsayılan değerdir ve görüntülerin veya videoların üst elemanın genişliğine ve yüksekliğine tamamen uyması için zorla gerilmesini sağlar. Bu durumda, orijinal en-boy oranı göz ardı edilir ve bu durum görüntü bozulmalarına neden olabilir.

  • Üst elemanın boyutuna tam olarak uyar.
  • En-boy oranı göz ardı edildiği için görüntüler veya videolar dikey ya da yatay olarak uzatılabilir.
contain 
1img {
2  object-fit: contain;
3}

contain, içeriği üst elemanın içine tamamen sığacak şekilde en-boy oranını koruyarak yeniden boyutlandırır. Üst elemanın boyutunu aşmaz ve dikey ya da yatay tarafta boşluk bırakılabilir.

  • Tüm içerik görüntülenir.
  • Orijinal en-boy oranını korumak için boşluk (letterbox veya pillarbox efekti) oluşabilir.
cover 
1img {
2  object-fit: cover;
3}

cover, içeriği üst elemanı tamamen kaplayacak şekilde, en-boy oranını koruyarak yeniden boyutlandırır. Bazı içerikler üst elemana sığacak şekilde kırpılabilir, ancak tüm eleman kabı doldurduğundan boşluk kalmaz.

  • İçerik, üst elemanı tamamen kaplar.
  • Orijinal en-boy oranını koruyarak kırpılabilir.
  • Genellikle arka plan resimleri veya hero bölüm resimleri için kullanılır.
none 
1img {
2  object-fit: none;
3}

none, resimleri veya videoları orijinal boyutunda ve en-boy oranında görüntüler. Üst öğenin boyutuna uyacak şekilde ayarlanmaz ve gerekirse içerik taşar.

  • İçeriğin orijinal boyutu korunur.
  • İçeriği üst öğeye sığdırmak için yeniden boyutlandırma yapılmaz.
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-down, none ve contain davranışlarını birleştiren bir değerdir. Eğer içerik üst öğeye sığıyorsa none davranışı gösterir, ancak içerik çok büyükse contain davranışı uygulanır ve sığacak şekilde küçültülür.

  • İçerik, üst öğeden büyükse küçültülür.
  • Daha küçükse orijinal boyutunda görüntülenir.

Örnek Kullanım

Arka Plan Görsellerini Üst Öğeye Sığdırma

Örneğin, bir resmi tüm ekrana yaymak için duyarlı tasarımı göz önünde bulundurarak cover kullanmak yaygındır. Aşağıdaki kod, bir resmin kırpılsa bile üst öğeye sıkıca sığdırılmasının bir örneğidir.

 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>

Bu durumda, resim üst öğeyi tamamen kaplar ve her ekran boyutunda güzel bir düzen sağlar. Eğer en-boy oranı farklıysa, resmin bazı bölümleri görünmeyebilir, ancak tasarıma uygun bir sunum elde edilir.

En-boy oranını koruyarak görüntüleri gösterme

Bir sonraki adımda, tüm resmi orijinal en-boy oranını koruyarak üst öğeye sığdırmak istiyorsanız, contain uygun bir seçenektir.

 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>

Bu örnekte, resim konteynıra sığacak şekilde küçültülür ve biraz boşluk oluşur, ancak orijinal resim bozulmadan görüntülenir.

Yaygın hatalar

object-fit kullanırken yaygın bir hata, üst öğenin boyutunu ayarlamamaktır. object-fit, içeriği üst öğeye sığdırma özelliğidir, bu yüzden üst öğenin boyutu net değilse beklenen etki elde edilemez. Üst öğenin width veya height değerlerinin düzgün bir şekilde ayarlandığından emin olun.

Örneğin, aşağıdaki kodda üst öğenin yüksekliği belirtilmemiştir, bu nedenle object-fit amaçlandığı gibi çalışmaz.

 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>

Bu durumda, üst öğenin yüksekliğini belirtmeniz veya flexbox ya da grid düzeni kullanarak tüm düzeni ayarlamanız gerekir.

object-fit'in kullanılması gereken durumlar

object-fit, özellikle duyarlı tasarımda ve çeşitli ekran boyutlarına hitap eden web sitelerinde önemlidir. Örneğin, aşağıdaki durumlarda kullanışlıdır:.

  • Görsellerin veya videoların farklı cihazlarda doğru bir şekilde görüntülenmesini ayarlamak istediğinizde
  • Arka plan görüntülerini veya benzerlerini tam ekran olarak görüntülemek, ancak kesime izin vermek istediğinizde
  • Bir görüntüyü oranını koruyarak bir üst elemana sığdırmak istediğinizde
  • Galerilerde olduğu gibi görüntü boyutlarını tutarlı bir şekilde görüntülemek istediğinizde

Bu durumlarda object-fit kullanmak, tasarım tutarlılığını koruyabilir ve kullanıcı deneyimini geliştirebilir.

Özet

object-fit, bir web sayfasında görüntülerin ve videoların üst elemanlarına göre nasıl görüntüleneceğini esnek bir şekilde kontrol etmenizi sağlayan güçlü bir CSS özelliğidir. fill, contain, cover, none ve scale-down gibi farklı değerleri kullanarak çeşitli tasarım gereksinimlerini karşılayabilirsiniz. Bunu doğru bir şekilde nasıl kullanacağınızı anlayarak ve uygun bir şekilde uygulayarak, görsel olarak çekici düzenler oluşturabilirsiniz.

object-position özelliği

CSS object-position özelliği, görüntü ve video gibi içeriklerin bir eleman içerisindeki konumunu kontrol etmek için kullanılır. object-position kullanarak içeriği belirli noktalara yerleştirebilir ve tasarıma uygun görsel efektler sağlayabilirsiniz.

object-position özelliğine genel bakış

object-position genellikle <img> etiketleri ve <video> etiketleri gibi medya elemanlarına uygulanır. Bu özellik, medyanın kapsayıcısında nerede görüntüleneceğini kontrol eder. object-fit, genellikle object-position ile birlikte kullanılır; object-fit bir görüntü veya videonun çerçeve boyutuna nasıl uyacağını ayarlar ve object-position içeriğin görüntüleme konumunu düzenler.

Değerler Nasıl Belirtilir

object-position konumları bir, iki veya dört değer kullanarak belirtebilir. Ancak, dört değer belirtmek eski tarayıcılar tarafından desteklenmeyebilir.

Bir Değer Belirtmek

Yalnızca bir değer belirtilirse, bu yatay (X ekseni) konumu olarak yorumlanır ve dikey (Y ekseni) otomatik olarak center olarak ayarlanır.

  • object-position: left; olarak belirtildiğinde, nesne sola hizalanır.
  • object-position: 70%; olarak belirtildiğinde, nesne yatayda %70'e, dikeyde ise ortalanır.
  • object-position: 50px; olarak belirtildiğinde, nesne soldan 50px uzağa ve dikeyde ortalanır.

İki Değer Belirtmek

İki değer belirtmek, yatay (X ekseni) ve dikey (Y ekseni) konumlarını ayrı ayrı ayarlamanıza olanak tanır.

  • object-position: center center; olarak belirtildiğinde, nesne ortalanır.
  • object-position: right top; olarak belirtildiğinde, nesne sağ üst köşeye yerleştirilir.
  • object-position: 75% 20%; olarak belirtildiğinde, nesne yatayda %75, dikeyde %20 konumlandırılır.
  • object-position: 50px 25px; olarak belirtildiğinde, nesne soldan 50px ve üstten 25px uzaklığa yerleştirilir.

Dört Değer Belirtmek

Dört değer belirterek, left veya top gibi anahtar kelimeler ve bunlarla birlikte sapmalar kullanarak daha ayrıntılı konumlandırma yapabilirsiniz.

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • object-position: left 10px top 20px; olarak belirtildiğinde, nesne soldan 10px ve üstten 20px uzaklığa yerleştirilir.
  • object-position: right 15% bottom 30px; olarak belirtildiğinde, nesne sağdan %15 ve alttan 30px uzaklığa yerleştirilir.
Değer Belirleme Formatı

object-position aşağıdaki değer biçimlerini kabul edebilir.

  • top, right, bottom, left ve center gibi anahtar kelimeleri belirtebilirsiniz.
  • Ayrıca 50% gibi yüzde değerleri veya px gibi birimleri de belirtebilirsiniz.

Örneğin, bunu şu şekilde kullanabilirsiniz.

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
Anahtar Kelimeler ve Yüzdelerin Kombinasyonu

Anahtar kelimeler ve yüzdeleri birleştirmek de mümkündür.

1img {
2    object-position: right 50%;
3}
  • Bu örnekte, görsel sağ kenara yerleştirilmiş ve dikeyde ortalanmıştır (%50). Bu kombinasyon, esnek yerleştirme gerektiğinde çok kullanışlıdır.

object-fit ile Kombinasyon

object-position genellikle object-fit ile birlikte kullanılır. object-fit, bir görselin veya videonun çerçevesine göre nasıl yeniden boyutlandırılacağını belirler. Örneğin, object-fit: cover kullanarak görsel çerçeveye uyacak şekilde kırpılır ve belirlenen object-position değerine göre yerleştirilir.

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • Bu örnekte, görsel tüm konteyneri kaplar ve içeriğin sağ alt kısmını görüntüler.
object-fit Değerleri ile Birleştirilmiş Örnekler

object-fit için aşağıdaki değerleri belirtebilirsiniz.

  • fill: Görsel bozulabilir ancak tüm konteynere sığar.
  • contain: Görselin tamamı, en-boy oranı korunarak görüntülenir.
  • cover: Konteynere sığacak şekilde kırpılır, en-boy oranı korunur.
  • none: Görsel orijinal boyutunda görüntülenir.

Örneğin, object-fit: contain kullanmak, tüm görseli gösterir ve onu object-position ayarına göre konumlandırır.

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

Bu ayarla, görsel kaplayıcının sağ tarafına yerleştirilir ve görselin tamamı görüntülenir.

Gelişmiş Kullanım

object-position yalnızca basit yerleşim ayarlamaları için değil, aynı zamanda görsel efektleri geliştirmek için de çeşitli senaryolarda uygulanabilir.

Görselin Bir Kısmını Vurgulama

Görselin tamamını göstermek yerine belirli bir kısmına odaklanmak istediğinizde kullanışlıdır. object-fit değerini cover olarak ayarlayın ve belirli bir alana odaklanmak için object-position kullanın.

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • Bu örnekte, görselin alt sol kısmı görüntülenerek önemli kısımlar vurgulanır.
Bir Videoyu Arka Plan Olarak Kullanırken

Bir videoyu arka plan olarak kullanırken object-position da faydalı olur. Sayfanın genel tasarımıyla uyumu sağlamak için videoyu belirli bir konuma yerleştirebilirsiniz.

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • Bu ayarda video, tüm sayfayı kaplar ve üst merkeze yerleştirilir.

Yaygın Sorunlar ve Çözümleri

object-position kullanırken birkaç sorunla karşılaşabilirsiniz. Burada yaygın sorunları ve çözümlerini tanıtıyoruz.

Görselin bir kısmı kesiliyor

object-fit: cover kullanıldığında görsel, konteynıra sığması için kırpılabilir. Bu durumda, object-position ile gösterim pozisyonunu ayarlayarak önemli kısımlarının görünmesini sağlayabilirsiniz.

1img {
2    object-fit: cover;
3    object-position: center;
4}
Görselin konumu beklenildiği gibi değil

Yüzde belirtileri her zaman sezgisel olmayabilir. Konteynırın boyutlarını ve en-boy oranını dikkate alarak farklı değerlerle deneme yapmanız gerekir. Geliştirici araçlarını kullanarak gerçek zamanlı ayar yapmak etkilidir.

Özet

object-position, medya öğelerini serbestçe konumlandırmak için güçlü bir araçtır. object-fit ile birleştirerek tasarıma uyumlu esnek düzenler oluşturulabilir. Çeşitli durumlarda görsel etkileri en üst düzeye çıkarmak için anahtar kelimeleri, yüzdeleri ve uzunluk birimlerini iyi öğrenin.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

`overflow` ve `contain` ÖzellikleriSaydamlıkla ilgili CSS özellikleri