Sanat yönetimi

Katie Hempenius
Katie Hempenius

  • Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran 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ı.

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.