CSS Nesneye uygun Özellik
CSS object-fitözelliği, bir <img> veya <video> öğesinin kabına sığacak şekilde nasıl yeniden boyutlandırılması gerektiğini belirtmek için kullanılır.
CSS nesnesine sığdırma Özelliği
CSS object-fitözelliği, bir <img> veya <video> öğesinin kabına sığacak şekilde nasıl yeniden boyutlandırılması gerektiğini belirtmek için kullanılır.
Bu özellik, içeriğe kapsayıcıyı çeşitli şekillerde doldurmasını söyler; "Bu en boy oranını koru" veya "gerin ve mümkün olduğunca fazla yer kaplayın" gibi.
Paris'ten aşağıdaki resme bakın. Bu resim 400 piksel genişliğinde ve 300 piksel yüksekliğindedir:
Bununla birlikte, yukarıdaki resmi, genişliğinin (200 piksel) ve aynı yüksekliğin (300 piksel) yarısı olacak şekilde biçimlendirirsek, şöyle görünecektir:
Örnek
img {
width: 200px;
height:
300px;
}
Görüntünün 200x300 piksellik kapsayıcıya sığacak şekilde ezildiğini görüyoruz (orijinal en boy oranı bozuluyor).
object-fitMülkün devreye girdiği yer burasıdır. Özellik object-fitaşağıdaki değerlerden birini alabilir:
fill- Bu varsayılandır. Resim, verilen boyutu dolduracak şekilde yeniden boyutlandırılır. Gerekirse, görüntü sığacak şekilde uzatılacak veya sıkıştırılacaktır.contain- Görüntü en boy oranını korur, ancak verilen boyuta sığacak şekilde yeniden boyutlandırılırcover- Görüntü en boy oranını korur ve verilen boyutu doldurur. Görüntü sığacak şekilde kırpılacaknone- Resim yeniden boyutlandırılmazscale-downnone- görüntü, veya öğesinin en küçük sürümüne küçültülürcontain
Nesneye sığdırmanın kullanılması: örtün;
Görüntüyü kullanırsak object-fit: cover;en boy oranını korur ve verilen boyutu doldurur. Görüntü sığacak şekilde kırpılacaktır:
Örnek
img {
width: 200px;
height:
300px;
object-fit: cover;
}
object-fit'i kullanma: include;
Resmi kullanırsak object-fit: contain;, en boy oranını korur, ancak verilen boyuta sığacak şekilde yeniden boyutlandırılır:
Örnek
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Nesneye sığdırmayı kullanma: doldurma;
Resmi kullanırsak object-fit: fill;verilen boyutu dolduracak şekilde yeniden boyutlandırılır. Gerekirse, görüntü sığacak şekilde uzatılır veya sıkıştırılır:
Örnek
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Nesneye sığdırmayı kullanma: yok;
Resmi kullanırsak object-fit: none;yeniden boyutlandırılmaz:
Örnek
img {
width: 200px;
height:
300px;
object-fit: none;
}
Nesneye sığdırmayı kullanma: küçültme;
Görüntüyü kullanırsak , veya object-fit: scale-down;öğesinin en küçük sürümüne küçültülür :none
contain
Örnek
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Başka bir örnek
Burada iki resmimiz var ve bunların tarayıcı penceresinin %50'sini ve yüksekliğin %100'ünü doldurmasını istiyoruz.
Aşağıdaki örnekte kullanmıyoruz object-fit, bu nedenle tarayıcı penceresini yeniden boyutlandırdığımızda, resimlerin en boy oranı bozulacak:
Örnek
Bir sonraki örnekte kullanıyoruz object-fit: cover;, bu nedenle tarayıcı penceresini yeniden boyutlandırdığımızda görüntülerin en boy oranı korunur:
Örnek
CSS nesnesine uygun Daha Fazla Örnek
Aşağıdaki örnek, object-fitözelliğin tüm olası değerlerini tek bir örnekte göstermektedir:
Örnek
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
CSS Nesnesi-* Özellikler
Aşağıdaki tablo, CSS nesnesi-* özelliklerini listeler:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |