# object-fit: CSS Resimleri Ölçeklendirmek

- Yazar: [Halit Yeşil](https://halityesil.com/)
- Yayın tarihi: 2020-08-27
- Son güncelleme: 2020-09-07
- Dil: Türkçe
- Kaynak adres: https://halityesil.com/css-resimleri-olceklendirmek-object-fit/
- Kategori: CSS
- Etiketler: css, css görsel boyutlandırma, css hilesi, css media boyutlandırma, css resim boyutlandır, css trick, css video ölçekleme, object-fit
- Lisans: https://creativecommons.org/licenses/by-nc/4.0/
- Atıf: Halit Yeşil. “object-fit: CSS Resimleri Ölçeklendirmek”. halityesil.com, 2020-08-27. https://halityesil.com/css-resimleri-olceklendirmek-object-fit/

---

Kullanıcı görsellerini, ürün resimlerini vb ekranda gösterirken boyutların uyumsuzluğu her zaman tasarımcıları mutsuz etmiştir. Bu nedenle tasarımcılar hazırladıkları tasarımlarda katı görsel kurallar koymayı severler. Ancak müşteri/kullanıcı her zaman bu kuralları esnetmek ister. Bu nedenle FrontEnd tasarımcıları HTML ve CSS kullanarak çeşitli hilelerle görsel düzeni bozan resimlerin kırpılmasını ya da boyutlandırılmasını ayarlamaya çalışırlar. Ancak bu işlemler sayfa yapısına boyut olarak maliyetli hal almanın yanı sıra css aracılığı ile arka plana getirilen görseller arama motorları tarafından taranmazlar. CSS in getirdiği ve güvenilir tarayıcıların tamamı tarafından tanınan `object-fit` özelliği tasarımcıların hayatını kolaylaştırıyor ve kod maliyetini büyük ölçüde düşürüyor. Bu özelliği kullanarak görsel dosyalarınızla oynamadan, iç içe frame tarzı divler vb uğraşmadan, görseli arkaplana gömmeden boyutlandırma ve kırpma işlerini kolayca yapabiliyoruz. Gelin bu özelliği inceleyelim.

`object-fit` Özelliği görsel öğenin (`<img ...>`, `<video ...>`, `<embed ...>` vb.) yüksekliği ve genişliği için nasıl bir boyutlandırma yapılacağına karar verir. Mülkle bağlantılı olarak `<a data-id="269" data-type="post" href="https://halityesil.com/css/css-ile-boyutlandirilmis-resimleri-konumlandirma-object-position/">object-position</a>` resimler, videolar ve diğer yerleştirilebilir medya biçimleri için tasarlanmıştır. Kendi başına kullanıldığında, `object-fit` satır içi bir resmi, kendi alanı içinde nasıl ezildiği ve gerildiği konusunda bize hassas bir kontrol sağlayarak kırpmamıza olanak tanır.

`object-fit` şu beş değerden biriyle ayarlanabilir:

- `<strong>fill</strong>`: en boy oranına bakılmaksızın görüntüyü içerik kutusuna sığacak şekilde uzatır. Varsayılan değerdir.
- `<strong>contain</strong>`: en boy oranını korurken kutuyu doldurmak için görüntünün boyutunu büyütür veya küçültür.
- `<strong>cover</strong>`: resim, en boy oranını koruyarak, kutunun genişliğini ve yüksekliğini dolduracak şekilde resmi kırpar.
- `<strong>none</strong>`: resim, üst öğenin yüksekliğini ve genişliğini yok sayacak ve orijinal boyutunu koruyacaktır.
- `<strong>scale-down</strong>`: resim, kutunun içinde kırpılmadan ve en boy oranı bozulmadan gösterilecek şekilde ayarlanır.

Bu özelliği şu şekilde ayarlayabiliriz:

```css
img {
  height: 120px;
}

.cover {
  width: 260px;
  object-fit: cover;
}
```

![](https://halityesil.com/uploads/2020/08/object-fit.jpg)

İkinci görüntü, soldaki orijinal görüntüden farklı bir en-boy oranına sahip olduğu için, görüntünün üst ve alt kısımlarını kırparak içerik kutusunun dışına uzanacaktır.

Varsayılan olarak görüntünün içerik kutusu içinde ortalandığına dikkat etmek önemlidir, ancak bu `object-position` özellik ile değiştirilebilir.

<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe allowfullscreen="" allowpaymentrequest="" class="cp_embed_iframe" frameborder="0" height="455" id="cp_embed_abNWwKX" name="CodePen Embed abNWwKX" scrolling="no" src="//codepen.io/anon/embed/abNWwKX?height=455&theme-id=1&slug-hash=abNWwKX&default-tab=result" style="width:100%;overflow:hidden" title="CodePen Embed abNWwKX">CodePen Embed Fallback</iframe></div>Görüntünün içeriği herhangi bir nedenle içerik kutusunu doldurmazsa, bu durumda doldurulmamış alan öğenin arka planını gösterecektir, bu örnekte açık gri bir arka plan.

## İlgili Özellikler

- [`object-position` nesne konumu](https://halityesil.com/css/css-ile-boyutlandirilmis-resimleri-konumlandirma-object-position/)

## Diğer Kaynaklar

- [W3C `object-fit`](https://dev.w3.org/csswg/css-images-3/#the-object-fit)
- [MDN `object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)
- [polyfill `object-fit`](https://github.com/anselmh/object-fit)

## Tarayıcı Desteği

IOS 8-9.3 ve Safari 7-9.1'in `object-fit` özelliğine sahip olduğunu ancak `object-position` desteklenmiyor.

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan [Caniuse'den alınmıştır](https://caniuse.com/#feat=object-fit) . Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

#### Masaüstü Bilgisayar

<figure class="wp-block-table"><table><thead><tr><th>Chrome</th><th>Firefox</th><th>IE</th><th>Edge</th><th>Safari</th></tr></thead><tbody><tr><td>31</td><td>36</td><td><span class="has-inline-color has-accent-color">Hayır</span></td><td>79</td><td>10</td></tr></tbody></table>

</figure>#### Mobil / Tablet

<figure class="wp-block-table"><table><thead><tr><th>Android Chrome</th><th>Android Firefox</th><th>Android</th><th>iOS Safari</th></tr></thead><tbody><tr><td>84</td><td>68</td><td>4.4.3-4.4.4</td><td>10.0-10.2</td></tr></tbody></table>

</figure>