Redimensionnement de l'image bootstrap

Les images sont les composants de conception populaires de toute application. Ils améliorent l'affichage de l'application et les rendent attrayants. Bootstrap propose de nombreuses classes qui fournissent plusieurs fonctionnalités aux éléments. Plus précisément, le «IMG-fluide«Est l'une de ces classes qui offrent une réactivité aux images.

Cet article décrira:

• Comment redimensionner une image à l'aide de bootstrap?
• Comment voir la taille de l'image sur différents écrans?

Comment redimensionner une image à l'aide de bootstrap?

Le "IMG-fluide«La classe est utilisée pour rendre l'image réactive. Les images réactives sont celles qui redimensionnent automatiquement en fonction des tailles d'écran. La classe «IMG-FLUID» a prédéfini les propriétés CSS »largeur maximale"Avec la valeur"100%" et "hauteur"Avec la valeur"auto".

Consultez l'exemple pour comprendre le concept déclaré.

Html

Ajouter le HTML "«Élément avec les attributs« src »,« classe »et« alt », où:

• "SRC»Attribut définit le chemin de l'image.
• "classe"Est défini avec la classe" img-fluid "pour le rendre réactif.
• "alt»Spécifie le texte alternatif qui sera affiché si l'image est incapable de charger:

Comme vous pouvez le voir, l'image réactive a été créée avec succès:

Comment voir la taille de l'image sur différents écrans?

Sur la page Web, cliquez avec le bouton droit et choisissez le «Inspecter" option. En conséquence, la fenêtre de l'outil des développeurs s'ouvrira, d'où vous devez cliquer sur «Basquer la barre d'outils de l'appareil" fonctionnalité:

Ensuite, cliquez sur le "Dimensions: réactif" option. Un menu déroulant apparaîtra. Sélectionnez les options et voyez à quoi ressemblera l'image sur cet appareil particulier:

C'est ainsi que les images peuvent être redimensionnées à l'aide de bootstrap.

Conclusion

Le bootstrap "IMG-fluide«La classe est utilisée pour rendre les images réactives. Cette classe a un CSS prédéfini "largeur maximale«Propriété avec la valeur»100%" et "hauteur"Avec la valeur"auto". Pour rendre l'image redonnable en fonction des tailles d'écran, ajoutez d'abord l'image à l'aide de l'élément «» et associez à la classe «IMG-FLUID». Cet article a démontré comment faire en sorte que l'image redimensionne en utilisant Bootstrap.