CSS object-fit ile Resmi Sığdırma – Kırpma ve Ölçeklendirme

Görsellerle çalışırken orijinal en boy oranını korumak isteyeceğiniz bir senaryo ile karşılaşmanız olasıdır. En boy oranını korumak, görüntülerin uzatılarak veya ezilerek bozuk görünmesini önleyecektir. Bu sorun için yaygın bir çözüm, background-image CSS özelliğini kullanmaktır. Daha modern bir yaklaşım, object-fit CSS özelliğini kullanmak olacaktır.

Bu yazıda, object-fit CSS özelliği için kullanılabile fill, cover, contain, none, ve scale-down değerlerinin etkilerini ve görüntüleri nasıl kırpıp ölçekleyebileceğini keşfedeceksiniz. Ayrıca object-postion CSS özelliğini ve görüntüleri nasıl dengeleyebileceğini keşfedeceksiniz.

İlginizi çekebilir: CSS ile Resmi Yuvarlamak

İçindekiler

Örnek Görüntünün Varsayılan Davranışını Gözlemleme

Örnek bir resmi görüntülemek için kullanılan aşağıdaki kodu göz önünde bulundurun:


    <style>
        img{
            width: 800px; 
            height: 350px;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

width: 800px;

height: 350px;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

img öznitelikleri kullanılarak genişlik, en boy oranı korunarak, orijinal boyutların yarısı olan 800 ve 350’ye ayarlanmıştır.

Şimdi, düzenin görüntülerin 300 piksel genişliğinde ve 250 piksel yüksekliğinde olmasını beklediği bir durumu düşünün:


    <style>
        img{
            width: 300px; 
            height: 250px;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        style=""
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

width: 300px;

height: 250px;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

style=""

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

Ortaya çıkan görüntü artık orijinal en boy oranını korumuyor ve görsel olarak “ezilmiş” görünüyor.

object-fit:fill Kullanma

fill değeri, object-fit için başlangıç değeridir. Bu değer, orijinal en boy oranını korumaz.


    <style>
        img{
            object-fit: fill;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: fill;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

Bu, tarayıcı oluşturma motorları için “başlangıç” değeri olduğundan, ölçeklenen görüntüden görünümde herhangi bir değişiklik olmaz. Ortaya çıkan görüntü hala ezilmiş görünüyor.

object-fit:cover Kullanımı

Kapak değeri orijinal en boy oranını korur, ancak görüntü tüm kullanılabilir alanı kaplar.


    <style>
        img{
            object-fit: cover;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: cover;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

Belirli durumlarda, object-fit:cover, görüntünün kırpılmış görünmesine neden olur. Bu örnek görüntüde, orijinal görüntünün sol ve sağdaki bazı kısımları, beyan edilen genişlik sınırlarına sığamadıkları için görünmüyor.

object-fit: contain Kullanımı

Contain, orijinal en boy oranını korur, ancak görüntü de kullanılabilir alanın sınırlarını aşmayacak şekilde sınırlandırılır.


    <style>
        img{
            object-fit: contain;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: contain;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu kod, tarayıcıda aşağıdaki sonucu üretecektir:

Belirli durumlarda, object-fit: contain görüntünün mevcut tüm alanı doldurmamasına neden olur. Bu örnek görüntüde, beyan edilen yükseklik küçültülmüş yükseklikten daha uzun olduğu için görüntünün üstünde ve altında dikey boşluk vardır.

object-fit:none Kullanımı

None değeri görüntüyü hiç yeniden boyutlandırmaz.


    <style>
        img{
            object-fit: none;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: none;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Resmin kullanılabilir alandan daha büyük olduğu durumlarda kırpılmış olarak görünecektir. Bu örnek görüntüde, orijinal görüntünün sol, sağ, üst ve alt kısmındaki bazı bölümleri, beyan edilen genişlik ve yükseklik sınırlarına sığamadıkları için görünmez.

object-fit: scale-down Kullanımı

Scale-down değeri, daha küçük bir görüntüyle sonuçlanacak olana bağlı olarak contain veya none gibi bir görüntü görüntüler.


    <style>
        img{
            object-fit: scale-down;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: scale-down;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Bu örnek görüntüde, görüntü, içerme gibi davranacak şekilde küçültüldü.

object-fit ve object-position Kullanımı

Nesneye sığdırmadan elde edilen görüntü kırpılmış görünüyorsa, varsayılan olarak görüntü ortalanmış olarak görünecektir. object-position özelliği, odak noktasını değiştirmek için kullanılabilir.

Daha önce object-fit:slace-down örneğini düşünün:

Bu örnek görüntüde, resim yukarıdan aşağı doğru çizilmiştir.

Ve son olarak, pozisyon, mevcut alan sınırları dışında belirtilirse ne olduğunu gözlemleyelim:


    <style>
        img{
            object-fit: cover; 
            object-position: -20% 0;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: cover;

object-position: -20% 0;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Görüntü aşağıdaki gibi olacaktır.

Bu örnek görüntüde, mevcut alanın sağında görünecektir. Ayrıca resmin solunda ofsetin %20’sini oluşturacak boşluk vardır.

Not: object-position özelliği ile aşağıdaki değerleri de kullanabildiğinizi unutmayın.


/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;

/* <percentage> values */
object-position: 25% 75%;

/* <length> values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 10ch 8em;

/* Edge offsets values */
object-position: bottom 10px right 20px;
object-position: right 3em bottom 10px;
object-position: top 0 right 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;

/* Keyword values */

object-position: top;

object-position: bottom;

object-position: left;

object-position: right;

object-position: center;

/* <percentage> values */

object-position: 25% 75%;

/* <length> values */

object-position: 0 0;

object-position: 1cm 2cm;

object-position: 10ch 8em;

/* Edge offsets values */

object-position: bottom 10px right 20px;

object-position: right 3em bottom 10px;

object-position: top 0 right 10px;

/* Global values */

object-position: inherit;

object-position: initial;

object-position: revert;

object-position: revert-layer;

object-position: unset;

Örnek:


    <style>
        img{
            object-fit: contain; 
            object-position: top 10px left 20px;
            width: 300px; 
            height: 250px;

            background-color: red;
        }
    </style>

    <img
        src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"
        width="800"
        height="350"
        alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."
        />

<style>

img{

object-fit: contain;

object-position: top 10px left 20px;

width: 300px;

height: 250px;

background-color: red;

}

</style>

<img

src="https://www.tasarimkodlama.com/wp-content/uploads/2022/07/resim.jpg"

width="800"

height="350"

alt="İstanbul görüntüsü 600 x 350 olarak ölçeklenmiştir."

Çıktısı şu şekilde olacaktır.

CSS object-fit ile Resmi Sığdırma – Kırpma ve Ölçeklendirme

Örnek Görüntünün Varsayılan Davranışını Gözlemleme

object-fit:fill Kullanma

object-fit:cover Kullanımı

object-fit: contain Kullanımı

object-fit:none Kullanımı

object-fit: scale-down Kullanımı

object-fit ve object-position Kullanımı

Yorum yap

İptal Et

CSS Chip ve Badge Yapımı

CSS Flexbox Kullanımı

HTML CSS ile Arkaplan Resmi Tam Ekran Yapma

CSS Sözde Elementler (CSS pseudo-elements)

Son Yazılar

Son Yorumlar

CSS object-fit ile Resmi Sığdırma – Kırpma ve Ölçeklendirme

Örnek Görüntünün Varsayılan Davranışını Gözlemleme

object-fit:fill Kullanma

object-fit:cover Kullanımı

object-fit: contain Kullanımı

object-fit:none Kullanımı

object-fit: scale-down Kullanımı

object-fit ve object-position Kullanımı

Yorum yap

İptal Et

Bunlar da ilginizi çekebilir

CSS Chip ve Badge Yapımı

CSS Flexbox Kullanımı

HTML CSS ile Arkaplan Resmi Tam Ekran Yapma

CSS Sözde Elementler (CSS pseudo-elements)

Son Yazılar

Son Yorumlar