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

Articles

CSS'e Giriş

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</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>

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: 500px; 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.

Duyarlı ve estetik açıdan hoş tasarımlar oluşturmak için object-fit kullanımını öğrenin.

`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.

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

Bu örnekte, görüntü kapsayıcıya sığacak şekilde ölçeklenmiştir (object-fit: cover) ve merkezi görüntülenecek şekilde konumlandırılmıştır (object-position: center).

Değerler Nasıl Belirtilir

object-position şu şekilde iki değerle belirtilir:.

Yatay konum (X ekseni)
Dikey konum (Y ekseni)

Değer Belirleme Formatı

object-position içerisinde, değerleri aşağıdaki formatta belirtebilirsiniz:.

Anahtar kelimeler: üst, sağ, alt, sol, orta
Yüzde: 0% - 100% arası
Uzunluk birimleri: px, em, rem, vb.

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

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.

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

Bu ayarda, görsel konteynerin üst kısmına yerleştirilir ve 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` Özellikleri

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

YouTube Video

Önizleme için HTML

Nesne Uydurma ile İlgili

object-fit Özelliği

object-fit Değerleri

fill (Varsayılan Değer)

contain

cover

none

scale-down

Örnek Kullanım

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

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

Yaygın hatalar

object-fit'in kullanılması gereken durumlar

Özet

object-position özelliği

object-position özelliğine genel bakış

Değerler Nasıl Belirtilir

Değer Belirleme Formatı

Anahtar Kelimeler ve Yüzdelerin Kombinasyonu

object-fit ile Kombinasyon

object-fit Değerleri ile Birleştirilmiş Örnekler

Gelişmiş Kullanım

Görselin Bir Kısmını Vurgulama

Bir Videoyu Arka Plan Olarak Kullanırken

Yaygın Sorunlar ve Çözümleri

Görselin bir kısmı kesiliyor

Görselin konumu beklenildiği gibi değil

Özet

YouTube Video

`object-fit` Özelliği

`object-fit` Değerleri

`fill` (Varsayılan Değer)

`contain`

`cover`

`none`

`scale-down`

`object-fit`'in kullanılması gereken durumlar

`object-position` özelliği

`object-position` özelliğine genel bakış

`object-fit` ile Kombinasyon

`object-fit` Değerleri ile Birleştirilmiş Örnekler