# 133: Trouver des images réactives - Astuces CSS

Anonim

Je suis probablement un peu rare dans la mesure où j'ai plutôt aimé essayer de suivre le truc des images réactives. C'est un problème intéressant qui a engendré de nombreuses solutions intéressantes. Cependant, le tout commence à se conclure maintenant, maintenant que les solutions officielles sont:

  1. et amis

  2. Disons que nous sommes sur un écran 1x. Parce que nous avons dit au navigateur que nous allons utiliser ces images aussi grandes que possible (100% de la fenêtre), les «points d'arrêt» pour le moment où le navigateur retournera les images se produiront à 1280px, 640px, et 320px, les mêmes tailles exactes que celles que nous avons indiquées pour les images.

    Si nous sommes sur un écran 2x, ces «points d'arrêt» seront réduits de moitié (indépendamment de ce que nous faisons réellement pour dimensionner ces images) et seront à 640px, 320px et 160px.

    Maintenant, disons que nous utilisons les mêmes images, mais nous en savons beaucoup plus sur notre mise en page et avons utilisé quelque chose comme ceci:

    Ici, nous disons (avec l' sizesattribut), si la fenêtre est de 500px ou moins, nous avons l'intention d'afficher l'image à 250px de large. Si la fenêtre est plus large que cela, affichez l'image à 500 px de large.

    Cela correspondrait à CSS comme ceci:

    img ( width: 500px; ) @media (max-width: 500px) ( img ( width: 250px; ) )

    Sur un écran 1x, vous obtiendrez toujours l'image 320w (petite) lorsque la fenêtre d'affichage est large de 500px ou plus petite, et vous obtiendrez toujours l'image 640w (moyenne) lorsque la fenêtre d'affichage est plus grande. Vous n'obtiendrez jamais la grande image, car elle peut dire que vous n'aurez jamais besoin d'autant de pixels.

    Sur un écran 2x, vous obtiendrez toujours l'image 640w (moyenne) lorsque la fenêtre d'affichage est large de 500px ou plus petite (car elle pense qu'elle a besoin de 500px de pixels et que le petit n'est pas assez à 320px), et vous obtiendrez toujours le Image de 1 280 W (grande) lorsque la fenêtre est plus grande. Vous n'obtiendrez jamais la petite image, car ce n'est jamais assez de pixels pour couvrir ce que vous lui avez dit que vous avez l'intention de rendre l'image.

    Dimensionnement réel

    N'oubliez pas que la taille réelle de l'image dépend toujours de vous. Je pense que dans la majorité des cas, c'est vous qui le faites via le CSS. Et le CSS gagne toujours. Ce que vous déclarez là sera la largeur de rendu de l'image, peu importe ce qui se passe avec le srcsetet les sizestrucs. Cela détermine simplement quelle image sera affichée.

    C'est ce qui rend l'attribut des tailles un peu difficile. Disons que vous avez quelque chose comme:

    .container ( width: 80%; ) .container article ( width: 50%; ) .container article img ( width: 33.33% )

    Ce n'est pas du tout inhabituel. Alors maintenant, quelle taille utilisez-vous dans l' sizesattribut? Ce serait 13,33% (multipliez-les tous ensemble) car ce nombre doit être relatif à la fenêtre, pas au conteneur. Et cela ne prend pas en compte les marges, le rembourrage et les éléments de ces conteneurs, c'est donc une sorte de supposition. Je suppose que le nombre de fers à cheval, les grenades à main et l'attribut des tailles sont proches.

    Alors disons qu'une requête média arrive et que le corps devient en fait 75% large en plus de tout cela. Vous devez le savoir pour pouvoir ajuster ce que vous pensez que la taille de rendu des images sera. Votre attribut de tailles peut devenir:

    sizes="(min-width: 500px) 8%, 13.33%"

    Ensuite, revoyez-le pour chaque requête multimédia de mise en page que vous avez qui affecte les images de contenu. Cela peut devenir un peu complexe.

    Tailles pratiques?

    Je soupçonne que la plupart des utilisations du monde réel utiliseront quelque chose comme:

    En supposant que les images de contenu feront environ la moitié de la taille de la fenêtre du navigateur sur de grands écrans et la taille réelle de la fenêtre du navigateur sur de petits écrans - laissez simplement les points d'arrêt se produire là où ils se produisent. Vous aurez toujours un choix assez décent de cette façon sans vous ruiner sur la correspondance exacte de toutes vos requêtes multimédias.

    Et rappelez-vous que ce sont des images de contenu. Le HTML a tendance à durer plus longtemps que CSS ou JS, en particulier lorsqu'il s'agit de contenu.

    Autres choses à savoir

    Vous pouvez également spécifier si une image est 2x ou 1x avec srcset. Un cas d'utilisation très simple peut donc être:

    Cela seul est assez utile. Ne le mélangez pas avec la spécification de largeurs. Comme le dit Eric Portis:

    Et encore une fois, permettez-moi de souligner que même si vous pouvez attacher des descripteurs de résolution 1x / 2x aux sources au srcsetlieu de wdescripteurs, 1x / 2x & w ne se mélangent pas. N'utilisez pas les deux à la fois srcset. Vraiment.

    Et vous vous souvenez quand j'ai dit que le remplissage de l'image d'origine était facile? Le nouveau peut être aussi simple que cela, mais les éléments à l'intérieur prennent également en charge srcsetet sizes. Cela signifie que vous pouvez être très précis. Cela ajoute une autre couche à ceci:

    1. Vous décidez lequel

      Liens

      • L'article de Martin Wolf qui a inspiré cela
      • Picturefill est le polyfill que vous souhaitez utiliser.
      • Article de Smashing Magazine sur Picturefill 2.0 par Tim Wright
      • Eric Portis explique pourquoi Srcset et les tailles existent et ce qu'il résout mieux que les requêtes multimédias
      • Eric Portis avec plus sur le nouveau

      Voir le testcase Pen srcset & tailles par Chris Coyier (@chriscoyier) sur CodePen