HTML <picture> etiketi

Tanım ve Kullanım

<picture> etiketi, web geliştiricilerinin belirli resim kaynaklarını belirlerken daha esnek hale getirir.

<picture> elementinin en yaygın kullanımı, duyarlı tasarımın sanatsal yönlerinde. Birden fazla resmi, bir resmin görüntü açıklığına göre oransal olarak genişlemesi veya küçülmesinden ziyade, tarayıcı görüntü açıklığını daha iyi doldurmak için tasarlayabilirsiniz.

<picture> elementi iki etiket içerir: bir veya daha fazla <source> etiketi ve bir <img> etiketi。

Tarayıcı, mevcut görüntü açıklığı ile eşleşen ilk <source> elementini arar ve doğru resmi (srcset özelliğinde belirtildiği gibi) gösterir. <img> elementi olarak <picture> elementinin en son alt elementi zorunludur ve herhangi bir source etiketi eşleşmediğinde yedek seçenek olarak kullanılır.

İpucu:<picture> elementlerinin çalışma şekli <video> ve <audio> Benzer. Farklı kaynaklar ayarlayabilirsiniz, tercih edilen ilk kaynağı kullanılır.

Ayrıca bakınız:

HTML Eğitimi:HTML <picture> ögesi

CSS Eğitimi:CSS Duyarlı Tasarım - Resimler

Örnek

<picture> Etiket kullanım yöntemi:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Kişisel olarak deneyin

Genel özellikler

<picture> Bu etiket ayrıca destekler HTML'deki genel özellikler。

olay özellikleri

<picture> Bu etiket ayrıca destekler HTML'deki olay özellikleri。

Tarayıcı Desteği

Tablo sayıları, bu etiketin ilk tam olarak destekleyen tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0