Images fluides dans une disposition de proportion variable

Il est assez facile de traiter les images fluides dans des dispositions indépendantes de nos jours. Cependant, pour des interfaces plus complexes, nous devons souvent placer des images à l'intérieur d'éléments réactifs, tels que cette carte:

Supposons que cette image soit un contenu non sémantique et n'est utilisée que pour la décoration. C'est idéal pour utiliser background-image . Et, comme cette image contient des objets, nous ne pouvons pas recadrer aucune pièce lors de la mise en page de manière réactive, nous choisissons donc background-size: contain .

Le problème est: sur les appareils mobiles, cette orientation de la carte change et devient vertical, avec l'image en haut. Nous pouvons le faire en utilisant tout type de technologie de mise en page CSS, et il est probablement préférable d'utiliser une grille CSS ou une boîte élastique.

Cependant, lorsque nous testons des écrans plus petits, nous obtenons les résultats suivants en raison de contain :

Ce n'est pas idéal. L'image est redimensionnée pour maintenir son rapport d'aspect et ne recaoule aucun détail, et nous ne pouvons pas modifier background-size pour cover si l'image est importante et ne doit pas être recadrée.

À ce stade, notre prochaine tentative pourrait être familière: placez l'image en ligne, pas l'arrière-plan.

Sur les appareils de bureau, cela fonctionne bien:

C'est aussi bon sur les appareils mobiles:

Mais sur des écrans plus petits, la proportion de l'image sera déformée en raison de toutes les tailles fixes.

Nous pouvons passer des heures à régler les images, les cartes et les propriétés élastiques, en ajustant d'avant en arrière. Ou, nous pouvons ...

Contenu principal séparé de l'arrière-plan

C'est la base pour acquérir une plus grande flexibilité et flexibilité dans les images réactives. Bien qu'il ne soit pas possible dans tous les cas, dans de nombreux cas, il peut être réalisé avec un peu d'effort dans la conception, surtout si une telle approche est planifiée à l'avance.

Dans notre prochaine itération, nous plaçons l'image de fraises sur un fond transparent et utilisons CSS pour définir la couleur bleue dans l'image raster. Continuez à utiliser la taille de la fenêtre dans la démo en redimensionnant l'espace d'échantillonnage!

En regardant soigneusement les styles, notez que nous ajoutons également un rembourrage à la div contenant l'image, afin que les fraises ne se rapprochent pas trop des bords. Nous pouvons contrôler complètement à quel point nous voulons qu'ils soient proches ou loin avec ce rembourrage.

Notez que nous utilisons également des marges négatives pour compenser le rembourrage sur l'enveloppe de carte externe, sinon il y aura des blancs autour de l'image.

Utilisez l'attribut d'objet-ajustement pour les images en ligne

Bien que la démonstration précédente fonctionne, nous pouvons toujours améliorer cette approche. Jusqu'à présent, nous avons supposé que l'image était un contenu sans sémantique - mais dans cette mise en page, les illustrations d'image peuvent également être plus qu'une simple décoration.

Si tel est le cas, nous ne voulons absolument pas que l'image soit recadrée, car cela équivaut en fait à la perte de données. Pour éviter cela, il est préférable de placer l'image en ligne au lieu de l'arrière-plan, ce que nous pouvons faire avec object-fit .

Nous avons extrait la fraise de l'arrière-plan, qui est maintenant un élément en ligne, mais nous conservons la couleur d'arrière-plan dans la même image Div.

Enfin, la combinaison object-fit: contain avec une largeur 100% vous permet de redimensionner la fenêtre et de maintenir le rapport d'aspect de la fraise. Cependant, l'inconvénient de cette approche est que nous devons définir une hauteur fixe pour la version de bureau de l'image - ou sinon elle suivra la proportion de la largeur du jeu (la réduisant changera la disposition). Si nous devons générer ces cartes avec une quantité variable de texte, le texte enveloppera, ce qui peut rendre les choses trop restrictives.

À venir bientôt: Ratio d'aspect

La solution au problème ci-dessus peut être rapidement mise en œuvre via la prochaine propriété aspect-ratio . Cela permettra de définir une échelle fixe de l'élément, par exemple:

 .el {
  Ratio d'aspect: 16/9;
}

Cela signifie que nous serons en mesure d'éliminer la hauteur fixe et de la remplacer par le rapport d'aspect que nous avons calculé. Par exemple, les dimensions du point d'arrêt du bureau de notre dernier exemple ressemblent à ceci:

 .image {
  / * ... * /
  hauteur: 184px;
  Largeur: 318px;
}

En utilisant aspect-ratio nous pouvons supprimer la déclaration de hauteur et calculer pour obtenir l'échelle 184 la plus proche:

 .image {
  / * ... * /
  Largeur: 318px; / * Largeur de référence * /
  Hauteur: Undet; / * Réinitialisez la hauteur définie en dehors de la requête médiatique * /
  Ratio d'aspect: 159/92; / * Près de 184px hauteur * /
}

Si vous souhaitez en savoir plus, vous pouvez explorer les attributs à venir de cet article.

Enfin, il existe plusieurs façons d'obtenir des images réactives fiables dans des dispositions à échelle variable. Mais l'astuce pour faciliter ce travail - et mieux - ne réside pas nécessairement dans CSS; Cela peut être simple, en ajustant simplement votre image, qu'il s'agisse de séparer le premier plan de l'arrière-plan (comme nous l'avons fait), ou de choisir une image spécifique qui fonctionne toujours même si une partie considérable du bord est recadrée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!