Duyarlı resimler ve sanat yönü

Duyarlı resimler genellikle srcset özelliğiyle uygulanır. srcset özelliği, görüntü dosya adlarının ve bunların genişlik veya yoğunluk tanımlayıcılarının virgülle ayrılmış bir listesidir.

Düzen kaymalarını önlemek için srcset kullanan <img> ve <source> etiketlerinde width ve height özelliklerini ayarlayın.

Yoğunluk açıklayıcıları

Yoğunluk tanımlayıcıları kullanan duyarlı resimler oluşturmak için:

• src ve srcset için listelenen tüm görüntüler aynı en boy oranına sahip olmalıdır.
• width ve height özelliklerini 1x resminin boyutlarıyla eşleşecek şekilde ayarlayın.
• src özelliği, 1x resmine başvuruda bulunmalıdır.

Genişlik açıklayıcıları

Genişlik tanımlayıcıları kullanan duyarlı resimler oluşturmak için:

• src ve srcset için listelenen tüm görseller aynı en boy oranına sahip olmalıdır.
• width ve height özellikleri, yedek resmin boyutlarıyla eşleşmelidir.
• Resim stilini gerektiği gibi ayarlayın. CSS olmadan, genişlik tanımlayıcıları olan duyarlı bir resimde width ve height ayarlarsanız resim her zaman bu ayarlanan boyutta oluşturulur. Bu durum, srcset öğesinde listelenen resimlerin boyutları farklı olduğunda bile geçerlidir. Bu, istediğiniz bir davranış olmayabilir. Resim stilinize width: 100%; height: auto; veya width: 100vw; height: auto; ekleyerek istediğiniz görünümü elde edebilirsiniz.

Resim öğeleri

Duyarlı <picture> öğeleri oluşturmak için:

• Tüm <source> etiketleri için width ve height özelliklerini ayarlayın. Bu özelliğe uygun değerler, <source> etiketinin srcset değerini nasıl kullandığına bağlıdır.
• İlgili <img> etiketinin stilini belirleyerek resmi ayarlayın. <source> etiketi boş öğe olduğu için stilin herhangi bir etkisi yoktur.
• <img> etiketinde width ve height özelliklerini ayarlayın. Bu değerler, yedek resmin doğal boyutuyla eşleşmelidir.

Örnekler

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>