L'ajustement d'objets et la position d'objet peuvent résoudre le problème de la recadrage déformé et incorrect des images ou des vidéos dans les pages Web. 1. Objet-Fit contr?le la méthode de remplissage. Les valeurs communes incluent le remplissage (remplissage de stretch), le contenu (conserver l'affichage complet de la proportion), la couverture (conserver le conteneur de couverture de proportion), aucune (taille d'origine) et l'échelle (adaptée au contenu dynamique); 2. La position d'objet contr?le la position de la zone de culture, et la syntaxe est similaire à la position d'arrière-plan, qui peut être utilisée pour spécifier la focalisation visuelle; 3. Les applications réelles incluent un recadrage des avatar mobiles, un affichage unifié de mise en page de style carte, une adaptation d'intégration vidéo et d'autres scénarios; 4. Faites attention à la compatibilité du navigateur et testez les effets de différentes proportions d'images pour garantir que les pièces clés ne sont pas recadrées. La ma?trise de ces deux attributs peut améliorer le contr?le des performances des éléments médiatiques dans différents conteneurs.

Si vous rencontrez des problèmes de déformation de mise en page et de recadrage inapproprié lors du traitement des images ou des vidéos sur une page Web, il est probable qu'il soit inutile pour object-fit et object-position . Bien que ces deux attributs CSS semblent discrets, ils peuvent considérablement améliorer le contr?le des performances des éléments médiatiques dans différents conteneurs.

objet-ats: contr?le comment les médias sont remplis

Lorsque vous mettez une image dans un conteneur de taille fixe, l'image peut être étirée ou mal alignée. à ce moment, object-fit est utile.

Il a plusieurs valeurs couramment utilisées:

• fill : la valeur par défaut, remplit l'ensemble du conteneur, quelle que soit l'échelle, peut être déformé
• contain : Continuez à mettre à l'échelle pour vous assurer que l'image entière est affichée et que le récipient peut être blanc
• cover : Continuez à mettre à l'échelle pour vous assurer que l'ensemble du conteneur est couvert et que l'image peut être recadrée
• none : taille d'origine, pas de zoom
• scale-down : similaire contain , mais le plus petit doit prévaloir (adapté au contenu dynamique)

Par exemple, si vous mettez une image horizontale dans un div 300x200, si vous utilisez object-fit: cover , l'image sera centrée et recadrée, ce qui convient à l'affichage de l'image de couverture; Bien que l'utilisation contain , l'image entière sera entièrement affichée dans la bo?te, ce qui convient à la scène de prévisualisation de l'album.

Position d'objets: contr?le la position de la zone de culture

Lorsque vous utilisez object-fit: cover ou none , l'image peut être recadrée. Voulez-vous décider par où commencer à poser? C'est ce que fait object-position .

Sa syntaxe est similaire à la position d'arrière-plan, comme:

• object-position: center; (défaut)
• object-position: top left;
• object-position: 50% 30%;
• object-position: 10px 20px;

Si vous avez une image rapprochée d'un personnage que vous souhaitez toujours afficher avec le visage comme centre, et même si l'échelle du conteneur change, la tête ne sera pas coupée, vous pouvez l'utiliser en conjonction avec object-fit: cover et object-position: center top .

Cette propriété est particulièrement utile dans la conception réactive, en particulier lorsqu'elle est nécessaire de souligner une orientation visuelle spécifique.

Suggestions d'application pratiques

Dans le développement réel, les points suivants méritent d'être notés:

• Croping Avatar mobile : utilisez cover position pour maintenir les images téléchargées toujours concentrées dans la zone spécifiée.
• Affichage unifié des images de mise en page de style carte : Configurez une largeur unifiée et un conteneur de hauteur et cover pour garantir des visuels soignés.
• Adaptation d'intégration vidéo : comme les images, la balise vidéo peut également utiliser ces deux attributs pour contr?ler la zone de lecture.
• Faites attention à la compatibilité du navigateur : les navigateurs modernes grand public le soutiennent, mais l'ancienne version d'IE ne peut pas.

De plus, n'oubliez pas de tester l'effet des images de différentes proportions dans le récipient pour éviter les espaces vides excessifs ou les pièces critiques qui sont recadrées.

Fondamentalement, c'est tout. La ma?trise object-fit et object-position vous permet de contr?ler plus de manière plus flexible les performances des éléments multimédias dans diverses mises en page, et le code est également concis et clair.

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!