Utilisation de l'attribut de tailles pour les images reponsives

Question

Je suis en train d'essayer d'envelopper ma tête en utilisant srcset et sizes sur img étiquettes.

Alors que je pense avoir compris les bases - principalement grâce à l'article this - je me bats dans l'application pratique de l'attribut sizes.

Dans tous les exemples que je peux trouver, les choses sont massivement simplifiées et l'attribut tailles est déclaré comme si à chaque point d'arrêt, la largeur de l'image sera une proportion exacte de la largeur de la fenêtre, permettant d'utiliser vm unités. Par exemple:

sizes="(min-width: 36rem) 33.3vw, 
     100vw" 

Bien sûr, dans la vie réelle, les images sont souvent dans d'autres conteneurs qui peuvent eux-mêmes être dans d'autres conteneurs et ainsi de suite, chacun avec leur propre marge, rembourrage ou de positionnement. Est-il juste de dire que dans tous les cas sauf les plus simples (lorsque les images sont de largeur de fluide et ne sont pas simplement un pourcentage exact de la fenêtre), calc doit être utilisé, ajoutant potentiellement des calculs complexes au html comme les dimensions d'une image doivent-elles être calculées en fonction de la largeur de la fenêtre, de tous les conteneurs de l'image? Par exemple comment calculeriez-vous la taille correcte pour une image située un conteneur avec 7px padding qui est lui-même dans un conteneur qui est 45% de son conteneur avec 15px marge qui est dans une barre latérale qui est 25% du conteneur de la page principale 15px de rembourrage et a une largeur minimale de 1220px?

sizes="(min-width: 36rem) calc(((((1220px - (2 * 15px) * 25%) * 45%) - (2 * 15px) - (2 * 7px)), 
     100vw" 

Essayer de calculer cette taille dans l'attribut semble ridicule, d'autant plus que tout cela pourrait changer à chaque point d'arrêt. avoir à garder ce calcul massivement complexe en phase avec les changements apportés au CSS semble être une folie. Et puis vous avez le support du navigateur patché pour calc. J'ai l'impression que je manque quelque chose d'évident, mais qu'est-ce que c'est?

Note: Je suis au courant de l'excellent d'Alexander Farkas Lazy Sizes qui fait les calculs de taille pour vous par l'utilisation de data attributs, mais je suis intéressé par l'utilisation standard.

Answer 1

Tout d'abord% unités ne sont pas autorisés dans sizes. Vous devez utiliser des unités vw. (Qui peut inclure la largeur de la barre de défilement). Donc, votre 25% devient 24-25vw par exemple. Deuxièmement il n'y a pas de différence réelle entre rem et em (dans le contexte de l'attribut de tailles). Si vous n'utilisez pas les requêtes média basées sur em/rem/min-width/max-width dans votre CSS, n'utilisez jamais celles-ci dans votre attribut sizes.

Les tailles de base n'ont pas besoin de correspondre exactement à votre taille d'image réelle. C'est un moyen pour le navigateur de trouver le bon candidat image à peu près. Votre règle min-width: 1200px ainsi que toutes les utilisations max-width de votre CSS devraient clairement faire partie d'une nouvelle condition de média dans votre attribut sizes.

Cela nous laisse avec la partie des tailles suivantes:

(min-width: 1200px) calc(11vw - 44px) 

Si vous ajoutez ont un maximum de largeur définie ou une requête média qui empêche la barre latérale de plus en plus, vous pouvez être moins correcte et simplement transformer 11vw - 44px en 10vw:

par exemple:

sizes="<...,>(min-width: 1800px) 180px, (min-width: 1200px) 10vw, <....>" 

A propos du support calc: picturefill 3.0 beta comme également respimage, faire inclure le support calc pour IE8 +, donc tous les navigateurs s qui supportent les tailles ont un bon support calc et tous les navigateurs polyfilled de respimage supportent aussi les tailles de calc.

À propos d'obtenir ceci directement. Ceci est clairement douloureux et dans la plupart des cas votre système CMS/backend devrait vous aider ici. Dans la plupart des projets, vous devez vous mettre d'accord sur un ensemble limité de formats d'image autorisés et écrire les tailles pour celles correspondant à votre conception. Et votre backend devrait réussir à attacher ces tailles au bon endroit. Au cas où ce n'est pas possible. Utilisez soit lazySizes ou utilisez srcset avec sizes au moins pour les images les plus importantes (c'est-à-dire: formats d'image volumineux, car c'est là que vous pouvez sauvegarder le plus de données).

---

Si vous voulez, vous pouvez choisir un vrai site web et y joindre des tailles correctes. Mais sois conscient. Il doit être seulement limité par la largeur. La norme ne prend actuellement pas en charge les images contraintes en hauteur (il s'agit uniquement d'une fonction de lazysisation).