Tiesto

Tiesto

WFN Üye
Konular
635
Mesajlar
635
Çözüm
0
Ticaret Puanı
0
Üyelik
24 Gün
Konum
Antalya
Web Sitesi
Var
Alanı
Domain Uzmanı
1/1
Konu sahibi
İmgenin en-boy oranını bozmadan bir kutuya sığmasını sağlamak için görsele width: 100%; height: 100%; object-fit: contain; uygulayın. Böylece resim kutuya tamamen sığar; kutu oranı ile resmin oranı farklıysa boşluk kalabilir. Kutuyu tamamen doldurmak istiyorsanız object-fit: cover; kullanın; bu durumda resmin kenarlarından kırpma olabilir.

Temel kullanım​


Önce görselin sığacağı kutuya sabit veya sınırlı bir genişlik ve yükseklik verin. Ardından img öğesinin her iki boyutunu kutuya bağlayıp object-fit ile oran koruma davranışını belirleyin.

HTML: 
<div class="resim-kutusu">
    <img src="resim.jpg" alt="Ürün görseli">
</div>

<style>
.resim-kutusu {
    width: 300px;
    height: 200px;
}

.resim-kutusu img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
</style>

Bu örnekte resim, 300×200 piksel olan kutunun içine tamamen yerleşir. Görselin oranı kutudan farklıysa CSS resmi esnetmez; kalan alan kutunun arka plan renginin görünmesine izin verir. display: block; ise görselin satır içi öğe davranışından kaynaklanabilecek küçük alt boşluğu önlemek için kullanılır.

Kutunun yüksekliğini sabitlemek istemiyorsanız, yalnızca görselin genişliğini sınırlayıp yüksekliği otomatik bırakabilirsiniz:

CSS: 
.resim-kutusu img {
    max-width: 100%;
    height: auto;
    display: block;
}

Bu kullanımda görsel kutunun genişliğini aşmaz ve yüksekliği özgün en-boy oranına göre hesaplanır. Ancak kutunun yüksekliği sabitlenmez; bu nedenle farklı görsellerin bulunduğu kartlarda tüm kutular aynı yükseklikte görünmeyebilir.

Kutuyu tamamen doldurmak mı, resmi tamamen göstermek mi?​


object-fit değerini, görselin tamamının görünmesinin mi yoksa kutunun boşluksuz dolmasının mı daha önemli olduğuna göre seçin.
DeğerSonuçNe zaman kullanılmalı?
containGörselin tamamı görünür, boşluk kalabilir.Ürün, logo, belge veya ekran görüntüsünün kırpılmaması gerektiğinde.
coverKutu tamamen dolar, kenarlar kırpılabilir.Kart kapakları, galeri görselleri ve sabit ölçülü afiş alanlarında.
fillGörsel kutunun ölçülerine zorlanır, oran bozulabilir.Genellikle kullanılmamalıdır; resmin esnemesine yol açar.
Örneğin kartların aynı yükseklikte ve boşluksuz görünmesi isteniyorsa cover tercih edilebilir:

CSS: 
.kart-gorseli {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

Bu kod resmin oranını korur; fakat resim kutudan daha yatay veya daha dikey bir orana sahipse bazı kenarlar görünmez. Kırpmanın hangi bölgeden yapılacağını değiştirmek için object-position kullanabilirsiniz:

CSS: 
.kart-gorseli {
    object-position: center;
}

/* Görselin üst kısmını öncelikli gösterir */
.kart-gorseli.ust {
    object-position: center top;
}

Responsive kullanımda dikkat edilmesi gerekenler​


Sabit genişlik yerine çoğu durumda kutuyu kapsayıcıya göre ölçeklendirmek daha uygundur. Örneğin görselin ekrandan taşmaması için:

CSS: 
.resim-kutusu {
    width: 100%;
    max-width: 600px;
    aspect-ratio: 3 / 2;
}

.resim-kutusu img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

aspect-ratio: 3 / 2; kutunun genişliği değişse bile yüksekliğin oranlı kalmasını sağlar. contain kullanıldığı için resim tamamen görünür; kutunun oranı ile görselin oranı uyuşmuyorsa boş alan oluşması normaldir. Boş alan istemiyorsanız yalnızca contain değerini cover ile değiştirin.

Resim orijinal boyutundan büyük hale gelmemeli, ancak küçük ekranlarda küçülebilmeli diyorsanız max-width: 100%; height: auto; yaklaşımını kullanın. Bu yöntem görseli sabit yükseklikteki bir kutuya zorlamaz; bu nedenle kart düzeni gibi eşit yükseklik gerektiren tasarımlarda aspect-ratio ve object-fit birlikte daha uygundur.

Resim neden hâlâ bozuk görünüyor?​


object-fit yalnızca görselin kendisine aynı anda genişlik ve yükseklik uygulandığında etkili olur. Bu nedenle img öğesinde yalnızca width: 100%; bulunuyorsa kutunun yüksekliği beklediğiniz gibi kontrol edilmeyebilir. Önce kutunun gerçek bir yüksekliği veya aspect-ratio değeri olduğundan, sonra görselde height: 100%; tanımlandığından emin olun.

Görsel esniyorsa object-fit: fill; kullanılıyor olabilir veya başka bir CSS kuralı sizin kuralınızı eziyor olabilir. Tarayıcının geliştirici araçlarında ilgili img öğesini seçip hesaplanan width, height ve object-fit değerlerini kontrol edin. contain ile resmin tamamı görünmesine rağmen boşluk kalıyorsa bu bir hata değildir; kutu ve görselin en-boy oranlarının farklı olduğunu gösterir. Boşluk yerine kırpma kabul edilebiliyorsa cover kullanmanız gerekir.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)