# object-position: CSS ile Boyutlandırılmış Resimleri Konumlandırma

- 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-ile-boyutlandirilmis-resimleri-konumlandirma-object-position/
- Kategori: CSS
- Etiketler: css, css görsel boyutlandırma, css görsel konumlandırma, css resim boyutlandır, object-fit, object-position
- Lisans: https://creativecommons.org/licenses/by-nc/4.0/
- Atıf: Halit Yeşil. “object-position: CSS ile Boyutlandırılmış Resimleri Konumlandırma”. halityesil.com, 2020-08-27. https://halityesil.com/css-ile-boyutlandirilmis-resimleri-konumlandirma-object-position/

---

Bir önceki yazımızda `<a data-id="258" data-type="post" href="https://halityesil.com/css/css-resimleri-olceklendirmek-object-fit/">object-fit</a> `ile görselleri nasıl kırpıp boyutlandırabileceğimizden bahsetmiştir. `object-position` özelliği ile kırptığımız görsellerin kırpma konumlarını ayarlayabiliriz.

`object-position` özelliği, `object-fit` özelliği ile bağlantılı olarak kullanılır. Örneğin, bir video veya resim olarak bir eleman içeriği-kutu içinde, X / Y koordinatları ile nasıl konumlandığı belirler. Bu özellik, `0 10%` veya `0 10px` gibi iki sayısal değer alır. Bu örneklerde, ilk sayı görüntünün içerik kutusunun (0) soluna yerleştirilmesi gerektiğini, ikincisi ise üstten %10 veya 10px konumlandırılması gerektiğini belirtir. Negatif değerler kullanmak da mümkündür.

`object-position` özelliği için varsayılan değer olan `50% 50%` kullanır. `object-fit` bu yüzden varsayılan olarak tüm görüntüleri içeriklerinin kutunun merkezinde konumlandırılmış olmasını sağlar:

```css
img {
  object-fit: none;
  object-position: 50% 50%; /* default value: image is centered*/
  object-position: 0 0; /* positioned top left of the content box */
}
```

Aşağıda `object-position`, `object-fit` özellik ayarlı bir görüntünün nasıl işlenebileceğine dair birkaç örnek bulunmaktadır. Görüntünün içeriği herhangi bir nedenle içerik kutusunu doldurmazsa, doldurulmamış alan `background-image`, son örnekte olduğu gibi bir renk veya öğenin arka planını gösterecektir :

<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_JjXNymR" name="CodePen Embed JjXNymR" scrolling="no" src="//codepen.io/anon/embed/JjXNymR?height=455&theme-id=1&slug-hash=JjXNymR&default-tab=result" style="width:100%;overflow:hidden" title="CodePen Embed JjXNymR">CodePen Embed Fallback</iframe></div>## İlgili Özellikler

- [Ölçeklendirme `object-fit`](https://halityesil.com/css/css-resimleri-olceklendirmek-object-fit/)

## Diğer Kaynaklar

- [W3C object-position](https://dev.w3.org/csswg/css-images-3/#the-object-position)
- [MDN object-position](https://dev.w3.org/csswg/css-images-3/#the-object-position)

## Tarayıcı Desteği

<figure class="wp-block-table"><table><thead><tr><th>Krom</th><th>Safari</th><th>Firefox</th><th>Opera</th><th>IE</th><th>Android</th><th>iOS</th></tr></thead><tbody><tr><td>31+</td><td>7.1 + \*</td><td>36+</td><td>26+</td><td><span class="has-inline-color has-accent-color">Hayır</span></td><td>4.4.4+</td><td>8.4 + \*</td></tr></tbody></table>

</figure>\* o`bject-fit` destekleniyor ama `object-position` desteklenmiyor.