Comment utiliser l'objet CSS et la position d'objet

Points de base

• Les propriétés CSS object-fit et object-position peuvent être utilisées pour redimensionner et positionner les images intégrées et autres éléments de remplacement, similaires aux propriétés CSS background-size et background-position pour les images d'arrière-plan.
L'attribut
• object-fit offre une variété d'options pour contrôler la façon dont l'image est affichée dans une zone spécifiée et peut masquer une partie de l'image si nécessaire. Ceci est utile pour adapter des images à un espace spécifique sans distorsion.
L'attribut
• object-fit a cinq valeurs de mot-clé principales: cover, contain, none, scale-down, fill et
. Ces valeurs déterminent comment l'image est affichée dans son conteneur, peut être de couvrir les zones, de s'adapter aux zones, de maintenir la taille naturelle, de réduire ou de remplir des boîtes de contenu.
• L'attribut object-position 50% 50% contrôle la position d'un élément d'image dans sa zone de contenu. Sa valeur par défaut est
, qui aligne le centre d'image avec le centre de la boîte de contenu, mais peut être ajusté à l'aide d'une série de valeurs de mots clés ou de valeurs de longueur.
• object-fit Bien que object-position et
soient conçus pour gérer tout type d'éléments de remplacement, ils sont le plus souvent utilisés pour adapter des images à des espaces spécifiques sans distorsion. Ils sont pris en charge dans tous les navigateurs modernes, mais pas dans Internet Explorer.

background-size CSS fournit les propriétés background-position et object-fit pour redimensionner et positionner l'image d'arrière-plan. Les propriétés object-position et object-fit nous permettent d'effectuer des opérations similaires sur des images intégrées (et d'autres éléments de remplacement, tels que des vidéos). Cet article plongera dans la façon d'adapter une image à un espace spécifique en utilisant object-position et comment utiliser

pour contrôler avec précision la position d'une image dans cet espace.

Utilisations de object-fit

Parfois, l'image peut être trop grande pour s'adapter à l'espace que nous voulons. Dans le passé, nous avons dû recadrer des images dans un éditeur d'image, ou redimensionner les images en définissant des contraintes de largeur et / ou de hauteur (ce n'est pas le choix parfait), ou d'effectuer une sorte de recadrage complexe, ou peut-être recourir à l'utilisation d'images d'arrière-plan ( Si les images ne sont pas seulement pour la décoration, ce qui est dommage).

La fonction de l'attribut sur une image est similaire à celle de object-fit sur une image d'arrière-plan: il offre une variété d'options pour contrôler la façon dont l'image est affichée dans une zone spécifiée et peut masquer une partie de le contenu de l'image si nécessaire. Cette zone spécifiée peut avoir une largeur et une hauteur fixes, ou il peut être un espace plus réactif, comme une zone de maillage, qui se développe, se rétrécit et se plie en fonction de la taille de la fenêtre de navigateur. background-size Comment travailler

Chaque élément HTML a sa propre "boîte de contenu" qui représente l'espace occupé par l'élément. Par défaut, la boîte de contenu de l'image correspond à sa taille naturelle.

Lorsque nous appliquons différentes largeurs et / ou hauteurs à l'image, nous modifions en fait la taille de la boîte de contenu. Si la taille de la boîte de contenu change, l'image remplira toujours la zone de contenu. Donc, si nous avons une image de 300px x 300px et réglé sa taille sur 300px x 200px, l'image apparaîtra déformée.

La propriété

object-fit offre une variété d'options pour nous afficher des images dans la zone de contenu redimensionnée. Nous pouvons masquer une partie de l'image ou forcer l'image à remplir partiellement sa boîte de contenu afin que l'image soit complètement visible et ne se déforme pas.

Paramètres

Pour illustrer en détail le fonctionnement des propriétés object-fit, nous plaçons une image dans un div centré à l'aide d'une disposition de grille. Le div a un fond brun et une bordure en pointillés est fournie par un pseudo-élément ::before, ce qui nous aidera à comprendre quels changements sont arrivés à l'image.

Affichez un exemple de SitePoint (@SitePoint) sur CodePen: objet-FIT: Configuration

Pour notre démonstration d'image, nous utiliserons l'image suivante (Oia, Santorini, Grèce). Ses dimensions naturelles sont de 400px x 600px.

Notre image est beaucoup plus grande que notre div et si nous plaçons l'image à l'intérieur de la div, elle débordera comme indiqué ci-dessous.

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-FIT: setup2

Notre objectif est d'empêcher l'image de déborder son conteneur comme celle-ci tout en le rendant confortable pour s'adapter au conteneur, et object-fit nous aidera à y parvenir.

Si nous utilisons une image d'arrière-plan, nous pouvons définir quelque chose de similaire à background-size: cover, et l'image d'arrière-plan sera confinée dans la zone du conteneur. Cependant, comme nous pouvons le voir, pour que object-fit fonctionne, nous devons d'abord définir la largeur et la hauteur de la boîte de contenu de l'image afin qu'elle soit différente des dimensions naturelles. Dans l'exemple suivant, nous limitons la largeur et la hauteur de l'image à 100% afin que sa boîte de contenu correspond à la taille du conteneur div:

img {
  width: 100%;
  height: 100%;
}

C'est à quoi il ressemble.

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-FIT: setup3

L'image et ses boîtes de contenu s'adaptent désormais parfaitement avec le conteneur, mais l'image est gravement déformée. C'est là que la magie de object-fit entre en jeu, voyons ce qu'elle peut offrir.

en utilisant object-fit Adap Images au conteneur

L'attribut

object-fit fournit cinq valeurs de mot-clé principales pour déterminer comment une image est affichée dans son conteneur. Deux des mots clés - cover et contain - effectuent la même fonction que leurs homologues background-size.

object-fit: cover

cover La valeur oblige l'image à couvrir complètement la zone du conteneur, affichant autant d'images que possible sans distorsion:

img {
  width: 100%;
  height: 100%;
}

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-FIT: Cover

Parce que l'image est très élevée, nous voyons sa pleine largeur, mais nous ne pouvons pas voir sa pleine hauteur, comme indiqué dans l'image suivante.

Les valeurs

cover sont probablement la valeur la plus pratique fournie et sont préférées dans la plupart des cas.

Ce qui mérite d'être noté ici est l'emplacement de l'image. Contrairement à background-position (par défaut est 0 0, qui localise l'image d'arrière-plan du coin supérieur gauche du conteneur), la valeur par défaut object-position est 50% 50%, qui centre l'image dans sa boîte de contenu. Lorsque nous examinons la propriété object-position plus tard, nous apprendrons à spécifier quelle partie de l'image est visible.

object-fit: contain

contain La valeur force l'image à s'adapter pleinement à sa boîte de contenu, mais pas déformée. L'image conserve son rapport d'aspect naturel afin qu'il ne remplisse pas son conteneur:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-FIT: contient

Il semble que nous puissions obtenir le même résultat que ci-dessus en définissant simplement height: 100% sur l'image. Mais ce n'est pas le cas, car cela positionnera l'image vers la gauche au lieu de centrer, ce qui est le paramètre par défaut pour object-fit. Combiné avec object-position, object-fit, il existe plus d'options pour la façon dont les images sont positionnées dans les conteneurs.

object-fit: none

Les propriétés

none permettent à l'image de rester dans sa taille d'origine naturelle. Seules les images partielles qui peuvent s'adapter à la boîte de contenu redimensionnée sont visibles.

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-FIT: Aucun

Contrairement à object-fit: cover, nos images ne sont pas obligées d'être entièrement visibles le long d'un axe. L'image d'origine est plus large et plus haute que la boîte de contenu, donc elle déborde dans les deux sens, comme indiqué dans l'image suivante.

Notez à nouveau que le centre de l'image est aligné avec le centre de la zone de contenu par défaut.

Notez également que object-fit: none ne signifie pas que object-fit ne fasse rien. Comme nous l'avons vu, il fait beaucoup de choses par rapport à ne pas avoir le object-fit réglé du tout. (Pour rappel, veuillez vérifier la situation après la suppression object-fit: none dans l'exemple ci-dessus.)

object-fit: scale-down

Les attributs sont soit les mêmes que

ou les mêmes que scale-down. Il sélectionne none pour faire afficher l'image de l'image. contain Affichez un exemple de SitePoint (@SitePoint) sur Codepen: objet-ajustement: Scale-Down

Évidemment, dans notre exemple actuel, il sélectionnera parce que notre conteneur

est plus petit que

. Si notre conteneur contain est plus grand que l'image, alors dominera et l'image conservera sa taille naturelle au lieu de remplir le conteneur dans une direction, que vous pouvez voir dans cette démo de codepen. none

Si nous modifions la valeur object-fit: fill en

dans la démo, c'est comme s'il n'y avait pas de paramètre

. En effet,, par défaut, l'image remplit sa boîte de contenu quelle que soit la taille définie. object-fit fill Affichez un exemple de SitePoint (@SitePoint) sur Codepen: object-fit objet-FIT: remplissez

Parce que la propriété peut déformer l'image, ce n'est peut-être pas le meilleur choix dans la plupart des cas.

fill Utiliser sans conteneur

Dans l'exemple ci-dessus, nous avons utilisé object-fit pour redimensionner l'image dans le conteneur Div, mais le principe que nous avons vu dans la pratique fonctionne aussi bien sans ce conteneur. Ce qui compte, c'est la taille de la zone de contenu de l'image et la façon dont l'image est affichée dans sa boîte de contenu.

Par exemple, nous pouvons appliquer le CSS suivant à l'image sans aucune div environnante:

object-fit

Les résultats sont présentés dans la démonstration de codePen ci-dessous.

Affichez un exemple de SitePoint (@SitePoint) sur codepen:

img {
  width: 100%;
  height: 100%;
}

objet-ajustement: pas de conteneur

Essayez de modifier les valeurs sur l'attribut pour écraser, remplir, rétrécir et aucun dans l'exemple ci-dessus pour voir le comportement de chaque valeur. Le résultat est le même que le résultat de l'image définie à 100% de largeur et de hauteur et incluse dans le Div réglé sur 300px x 300px.

utilisé dans la disposition réactive object-fit

Les propriétés object-fit peuvent être les plus utiles lorsque la taille de la zone spécifiée de l'image répond à la taille de la fenêtre du navigateur. La démonstration suivante attribue nos images à une zone de grille spécifique et flexible:

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: object-fit objet-ajustement dans une zone réactive

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Alors que la fenêtre et la zone de grille se développent et se rétrécissent, la valeur cover garantit que l'image s'adapte toujours parfaitement à sa zone de grille, modifiant la partie visible de l'image afin qu'elle ne se déforme jamais. (Afficher la démo en vue pleine page pour les meilleurs résultats.)

Pour en savoir plus sur les zones de grille, consultez notre guide de préparation de la grille CSS.

Utiliser object-position Définir la position de l'image

Tout comme en utilisant background-position pour définir la position de l'image d'arrière-plan dans son conteneur, l'attribut object-position contrôle la position des éléments d'image dans sa zone de contenu.

Comme nous pouvons le voir, la valeur par défaut de object-position est 50% 50%, ce qui signifie que le centre d'image est aligné avec le centre de la boîte de contenu sur les axes horizontaux et verticaux. Nous pouvons le changer en utilisant une série de valeurs de mots clés (en haut, en bas, à gauche, à droite, au centre) ou en utilisant des valeurs de longueur (telles que PX, EM ou%) ou les deux.

Supposons que nous voulons maintenant positionner notre image dans le coin inférieur droit. Nous pouvons utiliser le mot-clé right bottom ou la valeur de pourcentage 100% 100%:

img {
  width: 100%;
  height: 100%;
}

Affichez des exemples de SitePoint (@SitePoint) sur Codepen: Position d'objet 1: Mots-clés

L'image suivante illustre l'emplacement actuel de notre image.

Vous pouvez utiliser des mots clés de ciblage dans l'exemple ci-dessus pour voir comment ils fonctionnent, ainsi que les mots clés object-fit, mais les résultats devraient être faciles à prévoir.

Nous pouvons également compenser l'image à partir de son conteneur à l'aide d'unités telles que des pixels ou EM. Par exemple:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: Position d'objet 2: Unités

Nous pouvons faire des décalages similaires dans le coin inférieur droit en combinant des unités et des mots clés, comme indiqué ci-dessous:

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Affichez un exemple de SitePoint (@SitePoint) sur Codepen: Position d'objet 3: Unités et mots clés

Nous avons vu que nous pouvons utiliser des pourcentages pour localiser les images dans la zone de contenu. Comme avec l'attribut background-position, l'utilisation de pourcentages avec object-position peut être un peu déroutante. object-position S 50% 50% signifie que le centre de l'image est aligné avec le centre de la boîte de contenu sur les axes horizontaux et verticaux.

Si nous définissons object-position à 20% 40%, cela signifie qu'une ligne verticale à 20% du côté gauche de l'image coïncide avec une ligne verticale à 20% du côté gauche de la boîte de contenu et un horizontal Ligne à 40% du haut de l'image coïncidant avec une ligne horizontale à 40% du haut de la boîte de contenu, comme le montre la figure ci-dessous.

Nous pouvons le voir dans la démo de codepen ci-dessous.

Afficher des exemples de SitePoint (@SitePoint) sur Codepen: Position d'objet 4: pourcentages

Conclusion

Les attributs

object-fit sont destinés à être utilisés avec tout type d'éléments de remplacement, tels que des images, des vidéos, des iframes et des objets intégrés. Dans quelle mesure il est utile d'adapter des éléments comme des vidéos dans des domaines définis où certains éléments peuvent être cachés est probablement une question à discuter, mais il ne fait aucun doute qu'il existe des cas d'utilisation viables. Une meilleure option pourrait être de définir la largeur de l'Iframe sur le width: 100% de l'espace libre, puis d'utiliser la propriété aspect-ratio pour maintenir sa proportion.

Les situations plus courantes sont la nécessité d'adapter l'image à un espace spécifique, donc object-fit est très utile pour permettre à l'image de s'adapter à l'espace sans distorsion (même si une partie de l'image doit être cachée).

pour en savoir plus sur object-fit et object-position, consultez la page MDN pour ces propriétés:

• [objet-objet] (le lien doit être remplacé par un lien d'objet MDN)
• [position d'objet] (le lien doit être remplacé par le lien de position d'objet MDN)

Enfin, comme mentionné ci-dessus, il vaut la peine de comparer les propriétés object-fit et object-position avec les propriétés background-size et background-position, qui ont de nombreuses similitudes. Voyez comment utiliser CSS background-size et background-position pour en savoir plus.

FAQS (FAQ) sur CSS object-fit object-position et Propriétés

Quelle est la différence entre object-fit object-position et

dans CSS?

Les propriétés object-fit et object-position dans les object-fit CSS sont utilisées pour contrôler le contenu de l'élément de remplacement, tel qu'une image ou une vidéo. L'attribut background-size définit comment un élément réagit à la hauteur et à la largeur de sa boîte de contenu. Il est similaire à fill dans CSS, mais fonctionne avec des éléments de remplacement. Il a cinq valeurs: contain, cover, none, scale-down,

, et

. object-position background-position En revanche, l'attribut

détermine où l'élément de remplacement se trouve dans sa boîte. Il est similaire à

, mais fonctionne avec des éléments de remplacement. Il faut deux valeurs pour représenter les coordonnées x et y, qui définissent la position de l'élément. object-fit

Comment utiliser l'attribut

pour redimensionner l'image? object-fit Les propriétés

img {
  width: 100%;
  height: 100%;
}

peuvent être utilisées pour contrôler comment l'image doit être redimensionnée pour s'adapter à son conteneur. Voici un exemple:

<🎜> Dans cet exemple, l'image sera redimensionnée pour couvrir toute la largeur et la hauteur de son conteneur tout en conservant son rapport d'aspect. Si le rapport d'aspect de l'image ne correspond pas au rapport d'aspect du conteneur, l'image sera recadrée. <🎜>

Puis-je utiliser object-position avec l'image d'arrière-plan?

Non, object-position Les attributs ne peuvent pas être utilisés avec des images d'arrière-plan. Il ne fonctionne qu'avec des éléments de remplacement tels que img, video ou embed. Pour les images d'arrière-plan, vous pouvez utiliser l'attribut background-position à la place.

Comment fonctionne la valeur

object-fit contain?

La valeur

object-fit de la propriété contain redimensionne le contenu pour s'adapter à la zone de contenu tout en conservant son rapport d'aspect. Si son rapport d'aspect ne correspond pas au rapport d'aspect du contenu, le contenu entier sera visible, mais il peut encore y avoir un espace dans la boîte de contenu.

Quelle est la fonction de la valeur

object-fit? none La valeur

de l'attribut object-fit signifie que le contenu ignorera la hauteur et la largeur de la zone de contenu. Il conservera sa taille d'origine, ce qui peut entraîner la culture du contenu s'il est plus grand que la boîte de contenu. none

Comment utiliser l'image centrale

? object-position

Vous pouvez utiliser la propriété

pour centrer l'image dans sa boîte de contenu. Voici un exemple: object-position

img {
  width: 100%;
  height: 100%;
}

Dans cet exemple, l'image sera située au centre de sa boîte de contenu.

Puis-je utiliser des valeurs de pourcentage dans

? object-position

Oui, vous pouvez utiliser les valeurs de pourcentage dans l'attribut

. Ces valeurs indiquent l'emplacement du contenu par rapport à la zone de contenu. Par exemple, object-position localise le contenu dans le coin supérieur gauche de la boîte de contenu, tandis que 0% 0% le localise dans le coin inférieur droit. 100% 100%

Que se passe-t-il si je ne spécifie pas la valeur

? object-position

Si vous ne spécifiez pas la valeur

, la valeur par défaut est object-position, qui centrera le contenu dans sa zone de contenu. 50% 50%

Puis-je utiliser

et object-fit en même temps? object-position

Oui, vous pouvez utiliser les propriétés

et object-fit pour contrôler la taille et la position du contenu. Voici un exemple: object-position

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Dans cet exemple, l'image sera redimensionnée pour écraser sa boîte de contenu et la centrer.

Tous les navigateurs prennent en charge les propriétés

et object-fit? object-position

Tous les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge, soutiennent largement les propriétés

et object-fit. Cependant, Internet Explorer ne les soutient pas. object-position

Les liens Codepen dans tous les exemples de code doivent être remplacés par le lien réel. Veuillez noter que cet article a été considérablement réécrit et poli pour répondre aux exigences de la pseudo-originalité, tout en conservant toutes les informations et images du texte original.

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!