BOOTStrap Immagine Ridimensiona
Questo articolo descriverà:
- Come ridimensionare un'immagine usando bootstrap?
- Come vedere la dimensione dell'immagine su schermi diversi?
Come ridimensionare un'immagine usando bootstrap?
IL "img-fluid"La classe viene utilizzata per rendere l'immagine reattiva. Le immagini reattive sono quelle che si ridimensionano automaticamente in base alle dimensioni dello schermo. La classe "IMG-Fluid" ha proprietà CSS predefinite "larghezza massima"Con il valore"100%" E "altezza"Con il valore"auto".
Dai un'occhiata all'esempio per capire il concetto dichiarato.
Html
Aggiungi l'HTML ""Elemento con gli attributi" src "," classe "e" alt ", dove:
- "src"Attributo imposta il percorso dell'immagine.
- "classe"È impostato con la classe" IMG-Fluid "per renderlo reattivo.
- "Al"Specifica il testo alternativo che verrà visualizzato se l'immagine non è in grado di caricare:
Come puoi vedere, l'immagine reattiva è stata creata con successo:
Come vedere la dimensione dell'immagine su schermi diversi?
Nella pagina Web, fare clic con il tasto destro e scegliere "Ispezionare" opzione. Di conseguenza, si aprirà la finestra dello strumento per sviluppatori, da dove devi fare clic su "Brugangola del dispositivo" caratteristica:
Quindi, fai clic su "Dimensioni: reattivo" opzione. Verrà visualizzato un menu a discesa. Seleziona le opzioni e vedi come apparirà l'immagine su quel particolare dispositivo:
Ecco come le immagini possono essere ridimensionate usando bootstrap.
Conclusione
Il bootstrap "img-fluid"La classe viene utilizzata per rendere le immagini reattive. Questa classe ha un CSS predefinito "larghezza massima"Proprietà con il valore"100%" E "altezza"Con il valore"auto". Per rendere l'immagine ridimensionabile in base alle dimensioni dello schermo, prima aggiungi l'immagine usando l'elemento "" e associa la classe "IMG-Fluid" con essa. Questo articolo ha dimostrato come rendere l'immagine ridimensionare usando bootstrap.