Picture ve source
<picture> ve <source> ile görsel seçimini öğrenirsin.
Picture ne işe yarar?
Önceki derslerde <img> ve srcset ile aynı görselin farklı çözünürlüklerini sunmayı gördün. Peki ya mobilde başka bir kare, masaüstünde başka bir kare göstermek istersen? İşte <picture> bunun için.
<picture> bir kapsayıcıdır; içine <source> etiketleri ve sonunda bir <img> koyarsın. Tarayıcı source'ları sırayla dener, uygun olanı seçer; hiçbiri uymazsa <img>'yi gösterir. Böylece art direction (kare seçimi) yapabilirsin.
Source etiketi ve img yedek
<source> tek başına bir şey göstermez; <picture> içinde çalışır. En sık iki öznitelik alır: srcset görsel yolunu, media ise ekran koşulunu belirtir.
Önemli nokta: <picture>'nin son çocuğu her zaman bir <img> olmalıdır. Bu <img>, hiçbir source uygun olmadığında gösterilir; ayrıca tarayıcı <img>'nin alt metnini ve boyutlarını kullanır. Yani asıl erişilebilirlik ve yedek <img>'den gelir.
Media ile source seçimi
Birden çok <source> yazınca tarayıcı bunları yukarıdan aşağı dener. Her birine bir media özniteliği verirsen, ekran koşuluna uyan ilk source seçilir.
Örneğin <source media="(min-width: 800px)" srcset="genis.jpg"> yazarsan, ekran 800 pikselden genişse bu kaynak kullanılır; değilse tarayıcı bir sonrakine geçer. Bu, mobilde dikey bir kare, masaüstünde yatay bir manzara göstermek için idealdir.
Uygulama Picture, source ve img yaz
Body içine bir <picture> ekle. İçine bir <source> koy ve srcset özniteliğine manzara-genis.jpg yaz. Sonra bir <img> ekle; src özniteliği manzara-dar.jpg, alt özniteliği Dağ manzarası olsun.
Örnek çözümü göster
<body>
<picture>
<source srcset="manzara-genis.jpg">
<img src="manzara-dar.jpg" alt="Dağ manzarası">
</picture>
</body>Kendini test et
-
<picture> etiketinin temel amacı nedir?
- Sayfaya arka plan görseli eklemek
- Görseli sıkıştırıp boyutunu küçültmek
- Farklı kaynaklardan uygun görseli seçmek
- Görselin renklerini otomatik düzeltmek
Cevabı göster
Farklı kaynaklardan uygun görseli seçmek — Doğru. picture, farklı kaynaklar arasından uygun görseli seçmeyi sağlar.
-
Picture içine source yaz
<picture> <____ srcset="manzara-genis.jpg"> <img src="manzara-dar.jpg" alt="Dağ manzarası"> </picture>Cevabı göster
<picture> <source srcset="manzara-genis.jpg"> <img src="manzara-dar.jpg" alt="Dağ manzarası"> </picture> -
Etiketi rolüyle eşleştir
- <picture>
- Görsel seçim kapsayıcısı
- <source>
- Kaynak ve koşul tanımı
- <img>
- Son yedek görsel
- srcset
- Görsel yolu