Ana içeriğe geç

Nesne Sığdırma

Nasıl çalışır​

object-fit özelliğinin değerini yanıt veren object-fit yardımcı sınıflarımızla değiştirin. Bu özellik, içeriğin çeşitli şekillerde ana konteyneri doldurmasını sağlar; örneğin, en-boy oranını koruma veya mümkün olduğunca fazla alan kaplama gibi.

ipucu

object-fit yardımcı sınıflarının kullanımı, içeriği görsel olarak daha çekici hale getirir ve aynı zamanda responsive tasarım için önemli bir araçtır.

object-fit için değer sınıfları .object-fit-{değer} formatını kullanarak adlandırılır. Aşağıdaki değerlerden birini seçin:

  • contain
  • cover
  • fill
  • scale (küçültme için)
  • none

Örnekler​

object-fit-{değer} sınıfını değiştirilmiş öğeye ekleyin:

Yanıt veren​

Her object-fit değeri için yanıt veren çeşitler de mevcuttur ve bu çeşitler .object-fit-{breakpoint}-{değer} formatını kullanır. Aşağıdaki kesme kısaltmalarını kullanabilirsiniz: sm, md, lg, xl, ve xxl. Sınıflar, ihtiyaç duyduğunuz çeşitli efektler için birleştirilebilir.

bilgi

Yanıt veren sınıfların kullanımı, farklı ekran boyutlarında daha iyi bir kullanıcı deneyimi sağlar.

Video​

.object-fit-{değer} ve yanıt veren .object-fit-{breakpoint}-{değer} yardımcı programları `` öğelerinde de çalışır.

<video src="..." class="object-fit-contain" autoplay></video>
<video src="..." class="object-fit-cover" autoplay></video>
<video src="..." class="object-fit-fill" autoplay></video>
<video src="..." class="object-fit-scale" autoplay></video>
<video src="..." class="object-fit-none" autoplay></video>

CSS​

Sass yardımcı programları API'si​

Nesne sığdırma yardımcı programları scss/_utilities.scss dosyamızdaki yardımcı programlar API'sinde tanımlanmıştır. Yardımcı programlar API'sini nasıl kullanacağınızı öğrenin.

not

Sass ile çalışma, projelerinizi daha modüler hale getirir ve kod tekrarını azaltır.