# 133: Duyarlı Görüntüleri Ortaya Çıkarma - CSS Hileleri

Duyarlı görüntü olayına ayak uydurmaya çalışmaktan zevk aldığım için muhtemelen biraz nadirim. Pek çok ilginç çözüm getiren ilginç bir sorundur. Resmi çözümlere göre her şey şimdi toparlanmaya başlıyor:

1. ve arkadaşlar
2. 

   1x ekranındayız diyelim. Tarayıcıya, bu görüntüleri olabildiğince büyük (görüntü alanının% 100'ü) kullanacağımızı söylediğimiz için, tarayıcının görüntüleri çevireceği zaman için "kesme noktaları" 1280px, 640px, ve 320px, resimlerde söylediğimizle aynı boyutlarda.

   2x ekrandaysak, bu "kesme noktaları" ikiye bölünecek (bu görüntüleri boyutlandırmak için gerçekte ne yaptığımıza bakılmaksızın) ve 640px, 320px ve 160px olacaktır.

   Şimdi aynı görselleri kullandığımızı varsayalım, ancak sayfa düzenimiz hakkında daha çok şey biliyoruz ve bunun gibi bir şey kullandık:

   Burada ( sizesöznitelikle birlikte), görüntü alanı 500 piksel veya daha küçükse, görüntüyü 250 piksel genişliğinde görüntülemeyi planlıyoruz diyoruz. Görüntü alanı bundan daha genişse, görüntüyü 500 piksel genişliğinde görüntüleyin.

   Bu, CSS ile şu şekilde eşleşir:

   img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

   1x ekranda, görüntü alanı 500 piksel genişliğinde veya daha küçük olduğunda her zaman 320w (küçük) görüntü elde edersiniz ve görüntü alanı daha büyük olduğunda her zaman 640w (orta) görüntü alırsınız. Asla büyük görüntüyü elde edemezsiniz, çünkü asla bu kadar piksele ihtiyacınız olmayacağını söyleyebilir.

   Ona 2x ekranı, görüntü alanı 500 piksel genişliğinde veya daha küçük olduğunda her zaman 640w (orta) görüntüyü elde edersiniz (çünkü 500 piksel piksele ihtiyaç duyduğunu ve küçük 320 pikselde yeterli değildir) ve her zaman Görüntü alanı daha büyük olduğunda 1280w (büyük) görüntü. Küçük görüntüyü asla elde edemezsiniz, çünkü görüntüyü oluşturmak istediğinizde ona anlattıklarınızı kaplamak için asla yeterli piksel yoktur.

   Gerçek Boyutlandırma

   Görüntünün gerçek boyutunun hala size bağlı olduğunu unutmayın. Çoğu durumda bunu CSS aracılığıyla yapanın. Ve CSS her zaman kazanır. Orada beyan ettiğiniz şey, srcsetve sizesmalzemelerine ne olursa olsun görüntünün işlenmiş genişliği olacaktır . Bu, hangi görüntünün gösterileceğini belirler.

   Bu, boyutlar özelliğini biraz zorlaştıran şeydir. Diyelim ki şuna benzer bir şeyiniz var:

   .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

   Bu hiç de sıra dışı değil. Peki şimdi sizesöznitelikte hangi boyutu kullanıyorsunuz ? Bu,% 13,33 olacaktır (hepsini birlikte çarpın) çünkü bu sayının kapsayıcıya değil, görüntü alanına göre olması gerekir. Ve bu, bu kaplardaki kenar boşluklarını, dolguları ve diğer şeyleri hesaba katmaz, bu yüzden bir tür tahmin. Sanırım at nalı, el bombası ve boyutlar özniteliğinde yakın sayılar var.

   Diyelim ki bir medya sorgusu geliyor ve vücut aslında tüm bunlara ek olarak% 75 genişliyor. Bunu bilmeniz gerekir, böylece görüntülerin işlenmiş boyutunun ne olacağını düşündüğünüzü ayarlayabilirsiniz. Bedenler özelliğiniz şöyle olabilir:

   sizes="(min-width: 500px) 8%, 13.33%"

   Ardından, içerik görüntülerini etkileyen her düzen ortam sorgusu için bunu tekrar gözden geçirin. Biraz karmaşıklaşabilir.

   Pratik Boyutlar?

   Çoğu gerçek dünya kullanımının aşağıdaki gibi bir şey kullanacağından şüpheleniyorum:

   İçerik görüntülerinin büyük ekranlarda tarayıcı penceresinin yaklaşık yarısı boyutunda olacağını ve küçük ekranlarda tarayıcı penceresinin tam boyutunda olacağını varsayarsak - kesme noktalarının gerçekleştiği yerde olmasına izin verin. Yine de, tüm medya sorgularınızı tam olarak eşleştirmekten vazgeçmeden, bu şekilde oldukça iyi bir seçim elde edeceksiniz.

   Ve bunların içerik görüntüleri olduğunu unutmayın. HTML, özellikle içerik olduğunda, CSS veya JS'den daha uzun süre dayanır.

   Bilmeniz Gereken Diğer Şeyler

   Ayrıca srcset ile bir görüntünün 2x mi yoksa 1x mi olduğunu belirtebilirsiniz. Yani gerçekten basit bir kullanım durumu şunlar olabilir:

   Tek başına bu oldukça faydalıdır. Genişlikleri belirleyerek karıştırmayın. Eric Portis'in dediği gibi:

   Ve yine vurgulamak isterim ki, 1x / 2x çözünürlük tanımlayıcılarını kaynaklara tanımlayıcılar srcsetyerine ekleyebilseniz de w, 1x / 2x & w karışmaz. İkisini de aynı şekilde kullanmayın srcset. Gerçekten mi.

   Orijinal resim dolgusunun kolay olduğunu söylediğimi hatırlıyor musun? Yeni bu kadar kolay olabilir, ancak içindeki öğeler de srcsetve destekler sizes. Bu, çok spesifik olabileceğiniz anlamına gelir. Buna başka bir katman ekler:

   1. Hangisine sen karar ver

      Bağlantılar

      • Martin Wolf'un buna ilham veren makalesi
      • Resim doldurma, kullanmak istediğiniz çoklu dolgudur.
      • Tim Wright tarafından Picturefill 2.0 üzerine Smashing Magazine makalesi
      • Eric Portis, Srcset'in neden ve boyutları var olduğunu ve neyi medya sorgularından daha iyi çözdüğünü anlatıyor
      • Eric Portis, yeni hakkında daha fazla

      CodePen'de Chris Coyier (@chriscoyier) tarafından hazırlanan Pen srcset & size test senaryosuna bakın.