Comment utiliser CSS Object-Fit et Object Position pour contrôler comment les images sont affichées?

Comment utiliser CSS Object-Fit et Object Position pour contrôler comment les images sont affichées?

CSS fournit les propriétés object-fit et object-position pour contrôler la façon dont les images ou autres éléments remplacés (comme les vidéos) sont affichés dans leurs boîtes contenant. Ces propriétés sont particulièrement utiles lorsque les dimensions de l'image ne correspondent pas aux dimensions de son conteneur.

• FIT OBJECT : Cette propriété spécifie comment le contenu d'un élément remplacé doit être redimensionné pour s'adapter à son conteneur. Il contrôle le rapport d'aspect et la mise à l'échelle du contenu.
• Position d'objets : cette propriété détermine l'alignement du contenu de l'élément remplacé dans le conteneur après avoir été redimensionné en fonction de la propriété object-fit .

Pour utiliser ces propriétés, vous les appliquez simplement à votre règle CSS ciblant l'élément d'image. Voici un exemple:

 <code class="css">img { width: 300px; height: 200px; object-fit: cover; object-position: center; }</code>

Dans cet exemple, l'image sera redimensionnée pour s'adapter dans une boîte de 300x200 pixels tout en conservant son rapport d'aspect ( object-fit: cover ). Le contenu de l'image sera centré dans cette boîte ( object-position: center ).

Quelles sont les différentes valeurs pour l'ajustement d'objets et comment affectent-ils l'affichage de l'image?

La propriété object-fit peut prendre plusieurs valeurs, chacune affectant la façon dont l'image est affichée dans son conteneur:

• Remplir : il s'agit de la valeur par défaut. L'image est étirée pour remplir la boîte de contenu, qui peut déformer le rapport d'aspect.
• Contiennent : l'image est mise à l'échelle pour maintenir son rapport d'aspect tout en s'adaptant à la zone de contenu. Cela signifie que l'image peut ne pas remplir la boîte entière si son rapport d'aspect diffère de celui du conteneur.
• COUVERTURE : L'image est mise à l'échelle pour maintenir son rapport d'aspect lors du remplissage de l'ensemble de la boîte de contenu. Cela peut entraîner la culture de l'image si les rapports d'aspect ne correspondent pas.
• Aucun : l'image n'est pas du tout redimensionnée et est affichée à sa taille intrinsèque. Si l'image est plus grande que le conteneur, elle débordera.
• Échelle : l'image est dimensionnée comme si none ou contain était spécifiée, selon la première éventualité d'une taille d'objet en béton plus petite.

Chacune de ces valeurs fournit une façon différente de gérer la façon dont les images sont présentées, en fonction de vos besoins de conception.

La position d'objet peut-elle être utilisée pour aligner les images dans leurs conteneurs, et si oui, comment?

Oui, object-position peut être utilisée pour aligner les images dans leurs conteneurs après avoir été redimensionnée avec object-fit . La propriété object-position prend une ou deux valeurs qui spécifient les coordonnées x et y pour positionner l'image.

La syntaxe de object-position est similaire à la propriété background-position . Voici quelques exemples de la façon dont vous pourriez l'utiliser:

• Pour centrer une image:

   <code class="css">img { object-position: center; }</code>

  Copier après la connexion

• Pour positionner l'image en haut à droite:

   <code class="css">img { object-position: right top; }</code>

  Copier après la connexion

• Pour positionner l'image avec des coordonnées précises:

   <code class="css">img { object-position: 20% 50%; }</code>

  Copier après la connexion

Cela vous permet de contrôler finement le placement exact de l'image dans son conteneur, particulièrement utile lors de l'utilisation object-fit: cover ou contain pour gérer la taille de l'image.

Comment puis-je m'assurer que les images maintiennent leur rapport d'aspect en utilisant l'adaptation d'objets?

Pour vous assurer que les images maintiennent leur rapport d'aspect, vous devez utiliser la propriété object-fit avec des valeurs contain , cover , none ou scale-down . Voici comment chacun aide à maintenir le rapport d'aspect:

• Contiennent : Cela fait évoluer l'image à la plus grande taille de telle sorte que sa largeur et sa hauteur s'adaptent à la fois dans la zone de contenu. Le rapport d'aspect de l'image est conservé et ne peut pas remplir la boîte entière.
• COUVERTURE : Cela fait évoluer l'image à la plus petite taille de telle sorte que sa largeur et sa hauteur puissent couvrir complètement la boîte de contenu. Le rapport d'aspect de l'image est conservé, mais des parties de l'image peuvent être recadrées.
• Aucun : l'image est affichée à sa taille intrinsèque. Il ne sera pas redimensionné, conservant ainsi son rapport d'aspect d'origine.
• Échelle : cela agit comme none ou contain , selon la première éventualité d'une taille plus petite ou égale. Il garantit que le rapport d'aspect est maintenu tout en réduisant potentiellement la taille de l'image pour s'adapter dans le conteneur.

L'utilisation de l'une de ces valeurs sauf fill aidera à garantir que l'image maintient son rapport d'aspect tout en ajustant ou en remplissant son conteneur.

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!