HTML <resim> Etiketi
Örnek
<picture> etiketi nasıl kullanılır:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Tanım ve Kullanım
Etiket <picture>, web geliştiricilerine görüntü kaynaklarını belirlemede daha fazla esneklik sağlar.
Öğenin en yaygın kullanımı <picture>responsive tasarımlarda sanat yönetmenliği için olacaktır. Görüntü alanı genişliğine bağlı olarak yukarı veya aşağı ölçeklenen bir görüntüye sahip olmak yerine, tarayıcı görüntü alanını daha güzel bir şekilde doldurmak için birden fazla görüntü tasarlanabilir.
<picture>Öğe iki etiket içerir: bir veya daha fazla
< source> etiketi ve bir <img> etiketi.
Tarayıcı, medya sorgusunun geçerli görüntü alanı genişliğiyle eşleştiği ilk <source> öğesini arayacak ve ardından uygun görüntüyü gösterecektir (srcset özniteliğinde belirtilir). <picture><img> öğesi , kaynak etiketlerden hiçbiri eşleşmezse, bir geri dönüş seçeneği olarak öğenin son alt öğesi olarak gereklidir .
İpucu: Öğe <picture>, <video> ve <audio> öğelerine "benzer" çalışır. Farklı kaynaklar kurarsınız ve tercihlere uyan ilk kaynak kullanılandır.
Tarayıcı Desteği
Tablodaki sayılar, öğeyi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Genel Özellikler
Etiket ayrıca HTML'deki Global Nitelikleri<picture> de destekler .
Etkinlik Özellikleri
Etiket ayrıca HTML'deki Etkinlik Niteliklerini<picture> de destekler .
İlgili Sayfalar
HTML Eğitimi: HTML <picture> Öğesi
CSS Eğitimi: CSS Duyarlı Tasarım - Resimler