-
Üyelik
25.10.2017
-
Yaş/Cinsiyet
38 / E
-
Meslek
Mühendis
-
Konum
Antalya
-
Ad Soyad
A** K**
-
Mesajlar
8
-
Beğeniler
3 / 0
-
Ticaret
0, (%0)
Merhaba Arkadaşlar;
Sitemin footer bölümünde instagram fotoğraflarımı gösteren bir instagram feed var.
Ancak instagram fotoğraflarım birbirinden farklı en boy oranlarına sahip.
Fotoğraflar sayfaya yerleştirirken genişlikleri sabit tutup (Örneğin sayfaya 6 tane sığacak şekilde) yerleştiriyor. Haliyle boyu daha kısa olan fotoğrafların altında boşluk kalıyor.
Aşağıda style.css üzerinde konu ile alakalı kodları budum. Bu kodları kullanarak fotoğrafları birbiriyle aynı yüksekliğe nasıl croplayabilirim?
Teşekkür ederim.
#instafeed img {
display: block;
float: left;
height: auto;
}
#instafeed .header {
text-align: center;
margin-bottom: 25px;
}
#instafeed.big-photos img {
width: 16.666666%;
-
Üyelik
10.11.2013
-
Yaş/Cinsiyet
27 / E
-
Meslek
Front-End Developer
-
Konum
Adana
-
Ad Soyad
S** D**
-
Mesajlar
1345
-
Beğeniler
234 / 472
-
Ticaret
12, (%100)
Site adresinizi atarsanız yardımcı olayım. Html hiyerarşisini görmeden verdiğiniz css kodları ile yardımcı olamam.
sefacandemir.com.tr
-
Üyelik
25.10.2017
-
Yaş/Cinsiyet
38 / E
-
Meslek
Mühendis
-
Konum
Antalya
-
Ad Soyad
A** K**
-
Mesajlar
8
-
Beğeniler
3 / 0
-
Ticaret
0, (%0)
İlginiz için teşekkkür ederim.
vakitvarken.net
-
Üyelik
10.11.2013
-
Yaş/Cinsiyet
27 / E
-
Meslek
Front-End Developer
-
Konum
Adana
-
Ad Soyad
S** D**
-
Mesajlar
1345
-
Beğeniler
234 / 472
-
Ticaret
12, (%100)
#instafeed.big-photos img {
width: 16.666666%;
object-fit: cover;
height: 200px;
}
şeklinde değişiklik yapıp height değerini istediğiniz şekilde ayarlayın.
1 kişi bu mesajı beğendi.
sefacandemir.com.tr
-
Üyelik
10.11.2013
-
Yaş/Cinsiyet
27 / E
-
Meslek
Front-End Developer
-
Konum
Adana
-
Ad Soyad
S** D**
-
Mesajlar
1345
-
Beğeniler
234 / 472
-
Ticaret
12, (%100)
Çektiği verilerin sayısına göre listeleme yapıyor. Css de bir değişiklik yapmanız işlevselliği değil sadece görünüşü değiştirir. Css betik bir dildir. Html hiyerarşisine göre Css kodlanır. Belirli sınıflar belirli elementlere verilmiştir. Ben değişiklik yapacağım elementin sınıfını öğrenmek için sizden adres istedim. Görünüm ile alakalı bir sorun olduğu için sadece Css değişikliği ile istediğiniz görünümü elde ettiniz.
Merak ediyorsanız detaya da ineyim;
Bahsettiğiniz listelemede resimlere width değeri verilmiş fakat height değeri verilmemiş. Bu durumda resmin genişliğine göre yüksekliği otomatik verilir. Eğer geniş bir resim ise yüksekliği zaten az olduğu için sığdırma esnasında dolayısıyla yüksekliği düşecektir. İnce uzun resimlerde yükseklik problemi yaşanmayacaktır. Biz burda height değeri ile hepsine fix bir yükseklik verdik. Daha sonra object-fit:cover ile resmin asıl yükseklik ve genişlik değerlerindeki ornatının bozulması ile ortaya çıkan pixelleşme veya kötü görünümü giderdik. Object-fit:cover resmin ana boyutundaki orantıyı bozmadan sadece uzaklaştırma ve yakılaştırma yaparak belirlediğimiz genişliğe ve yüksekliğe sığdırmakta.
1 kişi bu mesajı beğendi.
sefacandemir.com.tr
