Çözüldü CSS Grid ile resim responsive şekilde nasıl ayarlanır?

mahmutxd07 · 14 Ocak 2023

Şimdilik böyle taslak hazırladım. Daha üstünde çalışıyorum ama resimleri farklı boyutlarda yükleyince çok büyük bozulmalar ile karşılaşıyorum. Bunu fix responsive bir şekilde nasıl ayarlayabilirim?

Mesela Grid ile şu an otomatik 3 col yer kaplıyor. 2. resim farklı olduğu için görüntüde bozukluk yaşanıyor.

Kxaan · 14 Ocak 2023

max width ve height denediniz mi yüzde şeklinde?

mahmutxd07 · 14 Ocak 2023

Kxaan dedi:
Max width ve height denediniz mi yüzde şeklinde?

Şöyle düşündüm kesin bir width veya height değeri verirsem bunu responsive olarak nasıl uyarlayabilirim?

Ekranı küçültüp büyütürken sorun yaşanmaz mı? Veya telefon boyutu tablet boyutu için tek tek width veya height değeri vermem gerekir?

Kxaan · 14 Ocak 2023

mahmutxd07 dedi:
Şöyle düşündüm kesin bir width veya height değeri verirsem bunu responsive olarak nasıl uyarlayabilirim?

Ekranı küçültüp büyütürken sorun yaşanmaz mı? Veya telefon boyutu tablet boyutu için tek tek width veya height değeri vermem gerekir?

CSS:

max-height: 50%;

Bu şekilde deneyin 50'yi salladım.

mahmutxd07 · 14 Ocak 2023

Kxaan dedi:
CSS:

max-width: 50%;

Bu şekilde deneyin 50'yi salladım.

Böyle verdiğimde resimlerin boyutu küçülüyor. Hepsi aynı boyutta yine olmuyor. Height olarak da denedim width olarak da.

1. fotoğraf 1920 1080 diyelim.
2. fotoğraf 2000 1000
3. fotoğraf 1700 800

Bunları random olarak söylüyorum. Ben bu boyutlarda ki fotoğrafları düzenli bir şekilde dizmek istiyorum ve height konusunda bu tarz patlaklar veriyorum.

Sabit width ve height değerleri verirsemde. Responsive olarak ayarlaması çok zor oluyor.

Kxaan · 14 Ocak 2023

CSS:

aspect-ratio: 16 / 9;

Böyle deneyin.

mahmutxd07 · 14 Ocak 2023

Kxaan dedi:
CSS:

aspect-ratio: 16 / 9;

Böyle deneyin.

Sorunum çözüldü hocam çok teşekkür ederim.

Çözüldü CSS Grid ile resim responsive şekilde nasıl ayarlanır?

Ayrıntılı düzenleme

mahmutxd07

Decipat

Kxaan

Kxaan

Kilopat

mahmutxd07

Decipat

Kxaan

Kilopat

mahmutxd07

Decipat

Kxaan

Kilopat

mahmutxd07

Decipat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz