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
İstenilen sonucu almak için resme border-radius: 50%; uygulayın. Resmin genişliği ve yüksekliği eşitse görsel daire olur; farklıysa elips görünür. Görselin oranını bozmadan daire içine sığması için genellikle object-fit: cover; da eklenir.

Resmi daireye dönüştürme​


Önce resmi HTML içinde normal şekilde ekleyin. Ardından CSS ile genişlik ve yükseklik değerlerini aynı yapıp köşe yuvarlama oranını yüzde 50 olarak ayarlayın:

HTML: 
<img class="profil-resmi" src="profil.jpg" alt="Profil fotoğrafı">

<style>
.profil-resmi {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
</style>

Bu örnekte width ve height değerleri eşit olduğu için resmin dış kutusu kare olur. border-radius: 50%; bu karenin köşelerini tamamen yuvarlayarak resmi daire şeklinde gösterir. object-fit: cover; ise resmin en-boy oranını korur ve kutuyu tamamen doldurur. Bu nedenle görselin kenarlarından bir bölümü kırpılabilir; ancak resim ezilerek genişletilmez veya sıkıştırılmaz.

Responsive daire kullanımı​


Resmin farklı ekranlarda küçülmesini istiyorsanız sabit genişlik yerine yüzdesel genişlik kullanabilirsiniz. Dairenin bozulmaması için yüksekliği de genişlikle aynı oranda belirlemek gerekir:

CSS: 
.profil-resmi {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

Burada aspect-ratio: 1 / 1; genişlik ile yüksekliğin oranını kare olarak korur. max-width değeri, resmin büyük ekranlarda sınırsız şekilde büyümesini engeller. Ekran daraldığında resim küçülür, fakat daire biçimi korunur.

Resmi kapsayıcının genişliğine göre tamamen esnek yapmak için max-width değerini kaldırabilirsiniz:

CSS: 
.profil-resmi {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

Bu kullanımda resim, bulunduğu kapsayıcının genişliği kadar olur. Kapsayıcının genişliği 300 piksel ise görsel yaklaşık 300 × 300 piksel ölçüsünde bir daire görünümüne sahip olur.

Resmin elips görünmesinin nedeni​


Aşağıdaki kullanım resmi daire değil, elips yapabilir:

CSS: 
.profil-resmi {
    width: 300px;
    height: 200px;
    border-radius: 50%;
}

Çünkü genişlik ve yükseklik farklıdır. Gerçek daire için bu iki değer eşit olmalıdır. Sabit değer kullanıyorsanız örneğin 200px ve 200px yazın. Responsive kullanımda ise aspect-ratio: 1 / 1; ile kare oranını koruyun.

Resmin kendisi daireye dönüşmüş olsa bile içindeki kişi veya nesne ortalanmamış görünebilir. Bu durumda object-position ile görüntünün hangi bölümünün gösterileceğini değiştirebilirsiniz:

CSS: 
.profil-resmi {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
}

center top kullanıldığında görüntünün yatayda ortası, dikeyde üst bölümü gösterilir. Portre fotoğraflarında yüzün aşağıdan kırpılmasını önlemek için bu değer daha uygun olabilir. Fotoğrafın ortası gösterilecekse object-position: center; kullanmanız yeterlidir.

Dairenin çevresine kenarlık ekleme​


Dairenin çevresinde çerçeve istiyorsanız border tanımı ekleyebilirsiniz:

CSS: 
.profil-resmi {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e0e0e0;
}

Kenar kalınlığı, çizgi türü ve renk border içinde belirlenir. Kenarlık dışarıdan eklendiği için resmin toplam kapladığı alan kutu modeline göre birkaç piksel büyüyebilir. Belirli bir toplam ölçüyü korumanız gerekiyorsa box-sizing: border-box; kullanabilirsiniz:

CSS: 
.profil-resmi {
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    border: 3px solid #e0e0e0;
    border-radius: 50%;
    object-fit: cover;
}

En temel çözüm border-radius: 50%; tanımıdır. Ancak dairenin her ekranda düzgün kalması için genişlik ve yüksekliği eşitlemeli veya aspect-ratio: 1 / 1; kullanmalı, resmin kutuyu bozmadan doldurması için de çoğu durumda object-fit: cover; eklemelisiniz.
 

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)