Bu demoyu deneyin
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından,
Tam ekran
. - Farklı tarayıcı boyutları kullanarak uygulamayı yeniden yükleyin. Resimlerin ne kadar farklı olduğuna dikkat edin boyutları birbirinden farklı olanlar, bunların farklı kırpma ve en boy oranları.
Neden böyle oldu?
Sanatla ilgili yönlendirme farklı ekran boyutlarında farklı resimler gösteriyor.
Duyarlı bir resim, aynı resmin farklı boyutlarını yükler. Sanat eseri yönetimi bir adım daha ileri gider ve görüntüleyin.
Görsel sunumu iyileştirmek için görsel yönü kullanın. Örneğin, bu demodaki resim kırpmaları, önemli yerin (çiçek) her zaman ayrıntılı olarak gösterilir. Poster yönetiminin avantajları: Tamamen estetik amaçlı, duyarlı resimlere göre herhangi bir performans avantajı sağlamaz.
Kodu göster
- Bu demonun poster yönetme kodunu görmek için
index.htmlöğesini görüntüleyin.
Kodun işleyiş şekli
Resimli içerik yönetimi,
<picture>,
<source>,
ve <img> etiket.
resim
<picture> etiketi, sıfır veya daha fazla <source> etiketi ve bir <image> etiketi için bir sarmalayıcı sağlar.
kaynak
<source> etiketi bir medya kaynağını belirtiyor.
Tarayıcı, ilk <source> etiketini bir medya sorgusu ile kullanır
şunu döndürür: Medya sorgularından hiçbiri eşleşmezse
tarayıcı <img> tarafından belirtilen resmi yüklemeye geri döner.
etiketinin src öğesindeki bilgidir.
img
<img> etiketi, bu kodu
<picture> etiketini destekler.
Tarayıcı <picture> etiketini desteklemiyorsa
<img> etiketiyle belirtilmiş resim.