Sanat yönetimi

Katie Hempenius
Katie Hempenius
X

Bu demoyu deneyin

  • Siteyi önizlemek için Uygulamayı Göster'e, ardından Tam Ekran'a tam ekran basın.
  • Farklı tarayıcı boyutları kullanarak uygulamayı yeniden yükleyin. Resimlerin ne kadar farklı olduğuna dikkat edin: Yalnızca farklı boyutlarda değil, aynı zamanda farklı kırpma ve en boy oranlarına da sahipler.

Neden böyle oldu?

Sanat yönü, farklı ekran boyutlarında farklı resimler gösterir.

Duyarlı bir resim, aynı resmin farklı boyutlarını yükler. Sanat yönetimi, bunu bir adım daha ileri taşır ve ekrana bağlı olarak tamamen farklı resimler yükler.

Görsel sunumu iyileştirmek için sanat yönetiminden yararlanın. Örneğin, bu demodaki farklı resim kırpmaları, önemli yerin (çiçek) ekrandan bağımsız olarak her zaman ayrıntılı olarak gösterilmesini sağlar. Sanat yönetiminin avantajları tamamen estetiktir; duyarlı resimlere kıyasla performans açısından herhangi bir fayda sağlamaz.

Kodu göster

  • Bu demonun sanat yönetimi kodunu görmek için index.html platformunu izleyin.

Kod nasıl çalışır?

Sanat yönetimi, <picture>, <source> ve <img> etiketlerini kullanır.

resim

<picture> etiketi, sıfır veya daha fazla <source> etiketi ve bir <image> etiketi için bir sarmalayıcı sağlar.

source

<source> etiketi bir medya kaynağı belirtir.

Tarayıcı, doğru değerini döndüren bir medya sorgusu ile ilk <source> etiketini kullanır. Medya sorgularının 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 kodun <picture> etiketini desteklemeyen tarayıcılarda çalışmasını sağlar.

Tarayıcı, <picture> etiketini desteklemiyorsa <img> etiketiyle belirtilen resmi yükler.