Il existe des propriétés CSS, telles que des images d’arrière-plan, des images de bordure, des propriétés de masquage et d’écrêtage, avec lesquelles vous pouvez: ajouter directement des images aux pages Web et contrôler leur comportement. Cependant, il existe également des propriétés CSS liées à l’image qui sont moins souvent mentionnées. travailler sur des images ajoutées avec le Balise HTML, qui le moyen préféré d'ajouter des images aux pages Web.
La description de travail de ces dernières propriétés varie de contrôler l'ombre de l'image à réglage de la netteté, nous aidant à mieux contrôler l'apparence et la position des images ajoutées avec le étiquette. Voyons les un par un.
1. Accentuez les images avec rendu d'image
Quand une image est mise à l'échelle, le navigateur adoucit l'image, donc ça n'a pas l'air pixelisé. Mais, selon la résolution de l'image et de l'écran, il se peut que ce ne soit pas toujours le meilleur. Vous pouvez contrôler ce comportement du navigateur avec le rendu d'image propriété.
Cette propriété bien prise en charge contrôle l'algorithme utilisé pour redimensionner une image. Ses deux valeurs principales sont bords nets et pixélisé.
le bords nets valeur maintient le contraste de couleur entre les pixels. En d'autres termes, aucun lissage n'est fait pour les images, ce qui idéal pour les dessins au pixel.
Quand pixélisé est utilisé, les pixels voisins d'un pixel pourraient prendre son apparence, faisant en sorte qu'ils semblent ensemble former un gros pixel, idéal pour les écrans haute résolution.
Si vous continuez à regarder de près les bords des fleurs dans le GIF ci-dessous, vous pouvez voir la différence entre un régulier et un normal. pixélisé image.
img rendu d'image: pixelisé;
2. Étirer les images avec ajustement d'objet
le contenir, couverture, remplir les valeurs sont toutes familières, nous les utilisons pour la taille de fond propriété qui contrôle la manière dont une image d’arrière-plan remplit l’élément auquel elle appartient. le ajustement d'objet propriété est assez similaire, car il détermine également comment une image taille dans son conteneur.
le contenir valeur contient l'image dans son conteneur. couverture fait la même chose, mais si les proportions de l'image et du conteneur ne correspondent pas, la l'image est coupée. remplir provoque l'image à étirer et remplir son récipient. réduirechoisit la plus petite version de l'image afficher.
De même pour le complément position de fond propriété de taille de fond, il y a un position d'objet propriété pour ajustement d'objet, aussi.
le ajustement d'objet propriété déplace une image à l'intérieur d'un conteneur d'image aux coordonnées données. Les coordonnées peuvent être définies comme unités de longueur absolue, unités de longueur relative, mots clés (Haut, la gauche, centre, bas, et droite) ou un combinaison valide d'entre eux (top 20px right 5px, centre droite 80px).
Nous ajoutons parfois (qui sont en ligne par nature) à côté des chaînes de texte pour plus d'informations ou de décoration. Dans ce cas, aligner le texte et l'image dans la position désirée peut être un peu délicat, si vous ne savez pas quelle propriété utiliser.
le alignement vertical la propriété est non exclusif aux seules cellules de table. Il peut également aligner un élément en ligne dans une boîte en ligne et peut donc être utilisé pour aligner une image dans une ligne de texte. Un nombre suffisant de valeurs peuvent être appliquées à un élément en ligne, vous avez donc le choix entre plusieurs options..
PDF
5. Images d'ombre avec filtre: ombre portée ()
Lorsqu'elles sont utilisées discrètement dans des textes et des zones, les ombres peuvent ajouter de la vie à une page Web. La même chose est vraie pour dans les images. Images avec des formes de base et des arrière-plans transparents peut bénéficier de la ombre portée Filtre CSS.
Ses arguments sont similaire aux valeurs des propriétés CSS liées à l'ombre (ombre de texte, boîte ombre). Les deux premiers représentent le distance verticale et horizontale entre les ombres et l'image, les troisième et quatrième sont les brouiller et le rayon de l'ombre, et le dernier est le couleur de l'ombre.
Juste comme ombre de texte, ombre portée crée également une ombre qui est moulé à l'objet appartenant. Ainsi, lorsqu'elle est appliquée à une image, l'ombre prend la forme de la partie visible de l'image..
#container width: 300px; hauteur: 300px; img width: 100%; hauteur: 100%; object-fit: contenir;
#container width: 300px; hauteur: 300px; img width: 100%; hauteur: 100%; object-fit: contenir; 
