Propriétés d'objet CSS et de position d'objet | Expliqué

Outre les images, les vidéos ou tout autre contenu de ce type apparaissant sur les pages Web, les désignant le bon ajustement et la bonne position sont très cruciaux lors de la conception de la structure d'un site Web. Certaines propriétés ont été fournies dans CSS qui vous permettent d'effectuer ces tâches avec une grande facilité et simplement une seule ligne de code. Nous avons enrôlé ces propriétés ci-dessous.

1. Propriété d'objet
2. Propriété de position d'objet

Plongeons-nous dans leurs profondeurs ci-dessous.

Propriété d'objet

Aux fins de spécifier comment une vidéo ou une image apparaissant sur une page Web sera redimensionnée pour ajuster son conteneur, la propriété d'objet-ajustement est utilisée. Cette propriété décrit essentiellement comment un élément agira lorsque la taille du conteneur qui le maintient change.

Syntaxe

objet-ats: aucun | Remplir | Couverture | contiennent | Échelle | Initial | hériter;

Tous ces paramètres sont expliqués dans le tableau ci-dessous.

Paramètres	Description
aucun	Cette valeur ne redimensionne pas le contenu.
remplir	Il s'agit d'une valeur par défaut qui obligera le contenu à remplir son conteneur en étirant ou en serrant.
couverture	Il est utilisé pour faire en sorte que le contenu remplisse son conteneur tout en préservant son rapport d'aspect.
contenir	Il est également utilisé pour faire remplir le contenu de son conteneur en découpant tout en préservant son rapport d'aspect.
réduction des effectifs	Cette valeur hérite des propriétés de la valeur Aucun ou contient une valeur.
initial	Cette valeur définit la propriété sur sa valeur par défaut.
hériter	Il hérite de la propriété de son élément prédécesseur.

Explorons davantage la propriété d'objet-ajustement à l'aide d'exemples.

Exemple

Pour mieux comprendre les différentes valeurs de la propriété d'objet-ajustement, intégrons d'abord une image dans notre page Web en utilisant HTML.

Html

Ici, nous avons ajouté une image dans l'attribut SRC de la balise.

Sortir

Une image a été intégrée dans la page Web.

Maintenant, explorons différents paramètres de la propriété d'objet et voyons ce que ceux-ci font à l'image ci-dessus.

Remplir

Ici, nous avons réglé une certaine largeur et hauteur de l'image et la propriété d'objet ajustée a été fournie la valeur de remplissage qui fera que l'image s'adaptera à son conteneur en serrant ou en étirement.

img
Largeur: 200px;
hauteur: 300px;
objet-ats: remplir;

Sortir

L'image a été pressée pour remplir son conteneur.

Couverture

La valeur de couverture de la propriété d'objet ajustera les côtés des images et l'intégrera à l'intérieur du conteneur en maintenant son rapport d'aspect.

img
Largeur: 200px;
hauteur: 300px;
FIT d'objet: couverture;

Sortir

Le paramètre de couverture fonctionne correctement.

Contenir

En plus de donner de la largeur et de la hauteur à l'image, nous avons défini la propriété d'objet pour contenir qui fera couper l'image dans le conteneur tout en préservant son rapport d'aspect.

img
Largeur: 200px;
hauteur: 300px;
objet-ats: contenir;
Border: 5px bleu massif;

Sortir

L'image a été coupée avec succès.

Réduction des effectifs

Le paramètre d'échelle de la propriété d'objet-atel.

img
Largeur: 200px;
hauteur: 300px;
FIT d'objet: échelle de l'échelle;
Border: 5px bleu massif;

Sortir

La valeur d'échelle fonctionne correctement.

Propriété de position d'objet

Afin de spécifier comment un élément (en particulier une image ou une vidéo) doit être positionné le long de la dimension horizontale ou verticale à l'intérieur de son conteneur, la propriété de position d'objet est utilisée. Cette propriété est toujours utilisée avec la propriété d'objet-ajustement.

Syntaxe

Position d'objets: position | Initial | hériter;

Le paramètre de position décrit la position de l'image ou de la vidéo le long des axes x et y. Il peut s'agir d'une chaîne comme la gauche, la droite, le centre ou un nombre en pixels ou en pourcentage.

Pour une meilleure compréhension, voici un exemple de la propriété de position d'objet. Nous considérons l'image utilisée dans les exemples ci-dessus. Dans le but de définir sa position avec la façon dont il sera redimensionné pour s'adapter à son conteneur, utilisez l'extrait de code suivant.

CSS

img
Largeur: 200px;
hauteur: 300px;
objet-ats: contenir;
Position d'objets: 1% 90%;
Border: 5px bleu massif;

Dans le code ci-dessus, nous définissons la propriété d'objet-ajustement pour contenir, ce qui signifie que l'image sera coupée à l'intérieur du conteneur tout en maintenant son rapport d'aspect. Pendant ce temps, les positions supérieure et gauche de l'image ont été affectées à 1%, tandis que les positions inférieures et droites ont été affectées à 90%. Enfin, la bordure du récipient a reçu 5px avec une couleur bleu massif.

Sortir

La propriété de position d'objet a été mise en œuvre avec succès.

Conclusion

CSS fournit Propriétés d'objet et de position d'objet qui aident à définir les dimensions des images. La propriété d'objet-ajustement décrit comment une vidéo ou une image sera redimensionnée pour ajuster son conteneur, en attendant, la propriété de position d'objet définit comment un élément (en particulier une image ou une vidéo) doit être positionné le long de la dimension horizontale ou verticale à l'intérieur Son conteneur. Ces deux propriétés ainsi que diverses valeurs que celles-ci peuvent rendre ont été démontrées dans ce post par des exemples.