Bootstrap -bilde Størrelse

Bilder er de populære designkomponentene i ethvert applikasjon. De forbedrer visningen av applikasjonen og gjør dem attraktive. Bootstrap tilbyr mange klasser som gir flere funksjoner til elementene. Mer spesifikt, “IMG-fluid”Er en av disse klassene som gir respons på bildene.

Denne oppskrivningen vil beskrive:

• Hvordan endre størrelse på et bilde ved hjelp av bootstrap?
• Hvordan se bildestørrelse på forskjellige skjermer?

Hvordan endre størrelse på et bilde ved hjelp av bootstrap?

“IMG-fluid”Klasse brukes til å gjøre bildet responsiv. Responsive bilder er de som automatisk endrer størrelse i henhold til skjermstørrelsene. "IMG-Fluid" -klassen har forhåndsdefinerte CSS-egenskaper "Maks bredde”Med verdien”100%”Og“høyde”Med verdien”bil”.

Sjekk ut eksemplet for å forstå det uttalte konseptet.

Html

Legg til html “”Element med“ SRC ”,“ Class ”og“ ALT ”attributter, hvor:

• “src”Attributt angir bildens vei.
• “klasse”Er satt med" IMG-Fluid "-klassen for å gjøre den lydhør.
• “alt”Angir den alternative teksten som vises hvis bildet ikke kan laste inn:

Som du kan se, er det responsive bildet blitt opprettet:

Hvordan se bildestørrelse på forskjellige skjermer?

Høyreklikk på websiden, høyreklikk og velg "Undersøke”Alternativ. Som et resultat vil utviklerverktøyvinduet åpne, hvor du må klikke på "Veksle enhetsverktøylinjen" trekk:

Klikk deretter på "Dimensjoner: Responsive”Alternativ. En rullegardinmeny vises. Velg alternativene og se hvordan bildet vil se ut på den aktuelle enheten:

Slik kan bildene endres ved hjelp av Bootstrap.

Konklusjon

Bootstrap “IMG-fluid”Klasse brukes til å gjøre bildene responsive. Denne klassen har en forhåndsdefinert CSS “Maks bredde”Eiendom med verdien”100%”Og“høyde”Med verdien”bil”. For å gjøre bildet som kan byttes i henhold til skjermstørrelsene, må du først legge til bildet ved å bruke "" -elementet og knytte "IMG-Fluid" -klassen med det. Denne oppskrivningen har vist hvordan du lager bildet til å endre størrelse ved hjelp av Bootstrap.