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!

CSS Grid est un outil puissant pour créer des dispositions Web complexes et réactives. Il simplifie la conception, améliore l'accessibilité et offre plus de contrôle que les méthodes plus anciennes.

L'article traite de CSS Flexbox, une méthode de mise en page pour l'alignement et la distribution efficaces de l'espace dans les conceptions réactives. Il explique l'utilisation de Flexbox, la compare à la grille CSS et détaille la prise en charge du navigateur.

L'article traite des techniques de création de sites Web réactifs à l'aide de CSS, y compris des balises de méta de la fenêtre, des grilles flexibles, des médias fluides, des requêtes multimédias et des unités relatives. Il couvre également l'utilisation de la grille CSS et de Flexbox ensemble et recommande le cadre CSS

L'article traite de la propriété CSS-Box-Sizing, qui contrôle comment les dimensions des éléments sont calculées. Il explique des valeurs telles que la boîte de contenu, la boîte de bordure et la boîte de padding, et leur impact sur la conception de la disposition et l'alignement de la forme.

L'article discute de la création d'animations à l'aide de CSS, de propriétés clés et de combinaison avec JavaScript. Le principal problème est la compatibilité du navigateur.

L'article discute de l'utilisation de CSS pour les transformations 3D, les propriétés clés, la compatibilité du navigateur et les considérations de performances pour les projets Web. (Compte de caractère: 159)

L'article discute de l'utilisation des gradients CSS (linéaire, radial, répétant) pour améliorer les visuels du site Web, l'ajout de profondeur, de concentration et d'esthétique moderne.

L'article traite des pseudo-éléments dans CSS, de leur utilisation dans l'amélioration du style HTML et des différences par rapport aux pseudo-classes. Fournit des exemples pratiques.


Outils d'IA chauds

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

Outils chauds

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

PhpStorm version Mac
Le dernier (2018.2.1) outil de développement intégré PHP professionnel

ZendStudio 13.5.1 Mac
Puissant environnement de développement intégré PHP

mPDF
mPDF est une bibliothèque PHP qui peut générer des fichiers PDF à partir de HTML encodé en UTF-8. L'auteur original, Ian Back, a écrit mPDF pour générer des fichiers PDF « à la volée » depuis son site Web et gérer différentes langues. Il est plus lent et produit des fichiers plus volumineux lors de l'utilisation de polices Unicode que les scripts originaux comme HTML2FPDF, mais prend en charge les styles CSS, etc. et présente de nombreuses améliorations. Prend en charge presque toutes les langues, y compris RTL (arabe et hébreu) et CJK (chinois, japonais et coréen). Prend en charge les éléments imbriqués au niveau du bloc (tels que P, DIV),

Version crackée d'EditPlus en chinois
Petite taille, coloration syntaxique, ne prend pas en charge la fonction d'invite de code
