CSS'de Nesne Sığdırma ve Arka Plan Boyutuna Derin Bir Bakış

Bir HTML öğesi için her zaman farklı boyutlu resimler yükleyemiyoruz. Resmin en boy oranıyla orantılı olmayan bir genişlik ve yükseklik kullanırsak, resim sıkıştırılabilir veya uzatılabilir. Bu iyi değil ve ya bir img öğesi için object-fit olarak ya da background-size kullanılarak çözülebilir.

Önce sorunu tanımlayalım. Aşağıdaki şekli göz önünde bulundurun:

Bu neden oluyor?

Bir görüntünün en boy oranı olacaktır ve tarayıcı, içeren kutuyu bu görüntüyle dolduracaktır. Görüntünün en boy oranı, kendisi için belirtilen genişlik ve yükseklikten farklıysa, sonuç ya sıkıştırılmış ya da uzatılmış bir görüntü olacaktır.

Bunu aşağıdaki resimde görüyoruz:

Çözüm

Resmin en boy oranı, içerdiği öğenin genişliği ve yüksekliği ile aynı hizada olmadığında her zaman farklı boyutta bir resim eklememiz gerekmez. CSS çözümlerine dalmadan önce, bunu fotoğraf düzenleme uygulamalarında nasıl yaptığımızı size göstermek istiyorum:

Artık bunun nasıl çalıştığını anladığımıza göre, bunun tarayıcıda nasıl çalıştığına geçelim. ( Spoiler uyarısı: Daha kolay! )

CSS object-fit

object-fit özelliği, img veya video gibi değiştirilen bir öğenin içeriğinin, kabına sığacak şekilde nasıl yeniden boyutlandırılması gerektiğini tanımlar. object-fit için varsayılan değer fill ve bu, görüntünün sıkıştırılmasına veya gerilmesine neden olabilir.

Olası değerlerin üzerinden geçelim.

object-fit için olası değerler

object-fit: contain

Bu durumda resim, kapsayıcısının en boy oranına uyacak şekilde yeniden boyutlandırılacaktır. Resmin en boy oranı kapsayıcınınkiyle eşleşmiyorsa, mektup kutusuna eklenir.

object-fit: cover

Burada, görüntü ayrıca kabının en boy oranına uyacak şekilde yeniden boyutlandırılacak ve görüntünün en boy oranı kabınkiyle eşleşmiyorsa sığacak şekilde kırpılacaktır.

object-fit: fill

Bununla, resim, kabının en boy oranına uyacak şekilde yeniden boyutlandırılacak ve resmin en boy oranı kabınkiyle eşleşmezse, sıkıştırılacak veya uzatılacaktır. Bunu istemiyoruz.

object-fit: none

Bu durumda, görüntü hiçbir şekilde yeniden boyutlandırılmaz, ne uzatılır ne de sıkıştırılır. cover değeri gibi çalışır, ancak kapsayıcısının en boy oranına uymaz.

object-fit dışında, bir görüntünün kapsayıcı içinde konumlandırılmasından sorumlu olan object-position özelliğine de sahibiz.

object-position için olası değerler

object-position özelliği, CSS'nin background-position özelliğine benzer şekilde çalışır:

top ve bottom anahtar kelimeler, içeren kutunun en boy oranı dikey olarak daha büyük olduğunda da çalışır:

CSS background-size

background-size ile ilk fark, bir HTML ( img ) öğesi değil, arka planla uğraşıyor olmamızdır.

background-size için olası değerler

background-size için olası değerler auto , contain ve cover .

background-size: auto

auto ile resim varsayılan boyutunda kalır:

background-size: cover

Burada resim, kapsayıcıya sığacak şekilde yeniden boyutlandırılacaktır. En-boy oranları aynı değilse, görüntü sığacak şekilde maskelenecektir.

background-size: contain

Bu durumda, görüntü kapsayıcıya sığacak şekilde yeniden boyutlandırılacaktır. En-boy oranları kapalıysa, görüntü sonraki örnekte gösterildiği gibi mektup kutusuna dönüştürülür:

background-position gelince, bu, object-position nasıl çalıştığına benzer. Tek fark, object-position konumunun varsayılan konumunun background-position farklı olmasıdır.

object-fit veya background-size ne zaman kullanılmaması gerektiği

Öğeye veya görüntüye sabit bir yükseklik verilirse ve ya background-size: cover ya da object-fit: cover sahipse, görüntünün çok geniş olacağı bir nokta olacaktır, bu nedenle nasıl yapılacağını etkileyebilecek önemli ayrıntıları kaybedersiniz. kullanıcı görüntüyü algılar.

Görüntüye sabit bir yükseklik verilen aşağıdaki örneği göz önünde bulundurun:

 .card__thumb { height: 220px; }

Kartın kabı çok genişse, sağda gördüğümüzle sonuçlanır (çok geniş bir resim). Bunun nedeni, bir en boy oranı belirtmiyoruz.

Bunun için iki düzeltmeden yalnızca biri var. Birincisi, içsel bir oran oluşturmak için dolgu kesmesini kullanmaktır.

 .card__thumb { position: relative; padding-bottom: 75%; height: 0; } .card__thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

İkinci düzeltme, yeni aspect-ratio CSS özelliğini kullanmaktır. Bunu kullanarak şunları yapabiliriz:

 .card__thumb img { aspect-ratio: 4 / 3; }

Not : En aspect-ratio özelliği hakkında bilgi sahibi olmak isteyenler için daha önce detaylı olarak yazmıştım: “CSS'de En Boy Oranını Öğrenelim”.

Kullanım Durumları ve Örnekler

Kullanıcı Avatarları

object-fit: cover , kullanıcı avatarlarıdır. Bir avatar için izin verilen en boy oranı genellikle karedir. Görüntüyü kare bir kaba yerleştirmek görüntüyü bozabilir.

 .c-avatar { object-fit: cover; }

Logolar Listesi

Bir işletmenin müşterilerini listelemek önemlidir. Bu amaçla genellikle logoları kullanacağız. Logoların boyutları farklı olacağından, onları deforme etmeden yeniden boyutlandırmanın bir yoluna ihtiyacımız var.

Neyse ki, object-fit: contain bunun için iyi bir çözümdür.

 .logo__img { width: 150px; height: 80px; object-fit: contain; }

Makale Küçük Resmi

Bu çok yaygın bir kullanım durumudur. Bir makale küçük resminin kapsayıcısında her zaman aynı en boy oranına sahip bir görüntü olmayabilir. Bu sorun, ilk etapta içerik yönetim sistemi (CMS) tarafından düzeltilmelidir, ancak her zaman değil.

 .article__thumb { object-fit: cover; }

kahraman arka plan

Bu kullanım durumunda, bir img öğesinin mi yoksa bir CSS arka planının mı kullanılacağına ilişkin karar aşağıdakilere bağlı olacaktır:

• Görüntü önemli mi? CSS herhangi bir nedenle devre dışı bırakılırsa, kullanıcının resmi görmesini ister miyiz?
• Yoksa görüntünün amacı sadece dekoratif mi?

Cevabımıza göre hangi özelliği kullanacağımıza karar verebiliriz. Görüntü önemliyse :

 <section class="hero"> <img class="hero__thumb" src="thumb.jpg" alt="" /> </section>

 .hero { position: relative; } .hero__thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }

Resim dekoratif ise, background-image ile gidebiliriz:

 .hero { position: relative; background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("thumb.jpg"); background-repeat: no-repeat; background-size: cover; }

Bu durumda CSS daha kısadır. Resmin üzerine yerleştirilen herhangi bir metnin okunabilir ve erişilebilir olduğundan emin olun.

object-fit: contain

img arka plan rengi ekleyebileceğinizi biliyor muydunuz? Bundan object-fit: contain kullanırken de faydalanırız.

Aşağıdaki örnekte, bir resim ızgaramız var. Görüntünün ve kapsayıcının en boy oranları farklı olduğunda, arka plan rengi görünecektir.

 img { object-fit: contain; background-color: #def4fd; }

Video Öğesi

Hiç arka plan olarak bir video ihtiyacınız oldu mu? Eğer öyleyse, muhtemelen ebeveyninin tüm genişliğini ve yüksekliğini almasını istediniz.

 .hero { position: relative; background-color: #def4fd; } .hero__video { position: aboslute; left: 0; top: 0; width: 100%; height: 100%; }

Ebeveyninin genişliğini ve yüksekliğini tamamen kaplamasını sağlamak için, varsayılan object-fit değerini geçersiz kılmamız gerekir:

 .hero__video { /* other styles */ object-fit: cover; }

Çözüm

Gördüğümüz gibi, hem object-fit hem de background-size , farklı görüntü en boy oranlarını işlemek için çok kullanışlıdır. Her görüntü için mükemmel boyutları ayarlamak üzerinde her zaman kontrolümüz olmayacak ve bu iki CSS özelliğinin öne çıktığı yer burasıdır.

Bir img öğesi ile bir CSS arka planı arasında seçim yapmanın erişilebilirlik üzerindeki etkileri hakkında dostça bir hatırlatma: Görüntü tamamen dekoratifse, o zaman bir CSS arka planı seçin. Aksi takdirde, bir img daha uygundur.

Umarım bu makaleyi faydalı bulmuşsunuzdur. Okuduğunuz için teşekkürler.