<source> attribut de média - largeur du conteneur plutôt que de l'écran?

Question

J'utilise la balise <picture></picture> pour afficher en réponse une image après l'évaluation de la taille du récipient, il est dans

Quelques exemples de code.

<picture> 
      <source media="(max-width: 70px)" srcset="IMAGE_URL"> 
      <source media="(min-width: 71px) and (max-width: 170px)" srcset="IMAGE_URL"> 
      <source media="(min-width: 171px) and (max-width: 270px)" srcset="IMAGE_URL"> 
      . . . 
      <img src="IMAGE_URL" alt="An image"> 
</picture> 

Cependant, la partie <source media="(MEDIA_QUERY)" ... > dans une mise en œuvre du format ci-dessus considère la largeur de l'écran entier, plutôt que le conteneur que le <picture></picture> est actuellement à l'intérieur.

L'aide sur ce point est appréciée.

Answer 1

Il n'existe malheureusement pas (encore) de façon standard de baser le comportement réactif sur un conteneur à la place de la fenêtre d'affichage du navigateur.

Il y a community efforts autour de Container Queries, mais rien n'a encore été défini, cela pourrait éventuellement devenir un standard.

Il existe plusieurs bibliothèques JavaScript, telles que EQCSS, qui tentent de fournir des solutions, mais l'utilisation de JavaScript pour une présentation CSS -hence n'est souvent pas une bonne idée. Vous pouvez également regarder CSS Conditions, mais il nécessite également JavaScript.