Sanat yönetmeni

Katie Hempenius

Bu demoyu deneyin

• Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
• Farklı tarayıcı boyutları kullanarak uygulamayı yeniden yükleyin. Resimlerin ne kadar farklı olduğuna dikkat edin: Yalnızca boyutları değil, kırpma ve en boy oranları da farklıdır.

Neden böyle oldu?

Görsel yönetmenlik, farklı ekran boyutlarında farklı resimler gösterir.

Duyarlı resim, aynı resmin farklı boyutlarını yükler. Sanat yönetmenliği bu süreci bir adım daha ileri götürür ve ekrana bağlı olarak tamamen farklı resimler yükler.

Görsel sunumu iyileştirmek için sanat yönetmenliğini kullanın. Örneğin, bu demoda farklı resim kırpma işlemleri, önemli noktanın (çiçek) ekrandan bağımsız olarak her zaman ayrıntılı şekilde gösterilmesini sağlar. Sanat yönetmeliğinin avantajları tamamen estetiktir; duyarlı resimlere kıyasla performans avantajı sağlamaz.

Kodu görüntüleme

• Bu demonun sanat yönetmeliği kodunu görmek için index.html dosyasını görüntüleyin.

Kodun işleyiş şekli

Sanat yönetmenliği, <picture>, <source> ve <img> etiketlerini kullanır.

picture

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

source

<source> etiketi bir medya kaynağını belirtir.

Tarayıcı, doğru değerini döndüren bir medya sorgusuyla ilk <source> etiketini kullanır. Medya sorgularından hiçbiri eşleşmezse tarayıcı, <img> tarafından belirtilen resmi yüklemeye geçer. 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.