Uyarlanabilir görüntüler veya duyarlı görüntüler, ekran boyutuna veya cihaza göre doğru görüntüleri yüklemeye yönelik yöntemlerin bir birleşimidir. Uyarlanabilir görüntüler, farklı ekran boyutlarına ve cihazlara göre otomatik olarak ayarlanır. Uyarlanabilir görseller, web sayfasına erişilecek her cihaz için farklı bir düzen oluşturulmasını gerektirir. Uyarlanabilir görüntüler CSS Flexbox kullanılarak kolayca oluşturulabilir. Flexbox, satırlar veya sütunlar oluşturan bir CSS düzeni tek boyutlu modelidir. Flexbox, duyarlı bir yapı oluşturmayı kolaylaştırır.
Bu gönderi, CSS Flexbox ile uyarlanabilir görseller oluşturmaya yönelik rehberlik sağlayacaktır.
CSS Flexbox ile Uyarlanabilir Görseller Nasıl Oluşturulur?
CSS Flexbox kullanarak uyarlanabilir görseller oluşturmak için kullanıcıların önce HTML yapısını oluşturması ve ardından CSS'yi uygulaması gerekir. Pratik bir gösterim için aşağıda verilen prosedürleri izleyin.
HTML Yapısı Oluşturun
Oluşturmak Öncelikle “” ayarını yaparak bir Flexbox oluşturun. görüntülemek ” özellik değerini “ esnek ' içinde ' görüntü kabı ” Daha sonra, “ belirterek görsellere CSS uygulayın. img ' ile birlikte ' .images-container ' isim. Öncelikle “ esnek ” özellik değerini “ 1 Kullanılabilir boş alanı görseller arasında eşit şekilde dağıtmak için. Daha sonra “ maksimum genişlik ” özellik değerini “ 100% ” görsellerin orijinal genişliklerini aşmamasını sağlamak için. Yı kur ' yükseklik ” özellik değerini “ Oto ” en boy oranını korumak için. Son olarak “” ayarını yaparak resimler arasına boşluk ekleyin. marj ” özellik değerini “ 10 piksel ”: CSS Flexbox kullanılarak uyarlanabilir görüntüler başarıyla oluşturuldu. Aşağıdaki çıktı görünümü, tarayıcı penceresinin sarılmasından önceki halidir: Şimdi görselin uyarlanabilir olup olmadığını kontrol etmek için tarayıcı penceresini saralım: CSS Flexbox ile uyarlanabilir görseller oluşturmak için kullanıcının önce HTML yapısını oluşturması, ardından etiket.
içine “ ekleyin kaynak ” etiketini kullanarak görsel yolunu belirtin ve alternatif görseli “ her şey ' etiket:
< div sınıf = 'görüntü kabı' >
< img kaynak = 'resim-1.jpg' her şey = 'İlk Resim' >
< img kaynak = 'resim-2.jpg' her şey = 'İkinci Resim' >
div >
CSS'yi uygula
görüntülemek: esnek ;
esnek sarma: sarma;
}
.images-container img {
esnek: 1 ;
maksimum genişlik: 100 % ;
yükseklik: otomatik;
kenar boşluğu: 10 piksel;
}
Sarma Öncesi 
Sarma Sonrası 
Yukarıdaki görsel, eklenen görsellerin uyarlanabilir olduğunu doğrulamaktadır. Çözüm
etiket. Ardından CSS'yi uygulayın ve CSS'nin içinde 'display' özelliğini '' olarak ayarlayın. esnek Flexbox'ı oluşturmak için. Bu yazı, CSS Flexbox ile uyarlanabilir görseller oluşturmaya yönelik kapsamlı kılavuzu göstermektedir.