Et responsivt bilde er et som kan tilpasse seg forskjellige enheter, uavhengig av skjermstørrelsene. Å ha et responsivt bilde på nettsiden har blitt så avgjørende nå for tiden. Siden det ikke bare øker hastigheten på nettstedet, men også tilbyr en kul brukeropplevelse på tvers av alle enheter. Responsive bilder vil også endres ved å endre størrelse på nettleseren.
Responsive bilder tilpasser seg effektivt forskjellige skjermstørrelser på forskjellige enheter. Det sikrer at kvaliteten opprettholdes. En responsiv nettside med responsive bilder øker garantert engasjement og konverteringsrater. Bilder kan gjøres responsive ved hjelp av CSS sammen med mediespørringer.
Denne oppskriften vil bruke HTML og CSS for å gjøre bildene responsive.
Hvordan gjøre bilder responsive med HTML og CSS?
For å gjøre bilder responsive ved hjelp av HTML og CSS, gå gjennom trinnene nedenfor:
Metode 1: Bruk egenskapen 'max-width'.
Den første metoden for å gjøre et bilde responsivt er å bruke ' maks bredde ” eiendom. « maks bredde ”-egenskapen brukes til å definere bildets maksimale bredde. I tilfelle innholdet overskrider den maksimale bredden, vil det endre høyden på elementet.
Lag HTML
For å legge til en bildefil i HTMLs
-tag, må brukere brukeLegg til CSS
Lag nå en ekstern CSS-fil, lagre den med '. css ” filtypen, og koble den inn i
-koden til HTML-filen. For å style bildefilen i CSS-filen, start med img-taggen og åpne de krøllete klammeparentesene. Deretter, inne i den krøllede bøylen, legg til ' maks bredde: 100 % ;” for å passe bildet horisontalt i beholderen. Dessuten vil det forhindre at bilder kuttes. Etter det, legg til ' høyde: auto ;” for å justere høyden automatisk, slik at bildet vises riktig:img {
maks bredde : 100 % ;
høyde : auto ;
}
Endre størrelsen på nettleservinduet for å sjekke hvordan bildet skaleres.
Metode 2: Bruk egenskapen 'bredde'.
En annen metode for å gjøre et bilde responsivt er ved å bruke egenskapen ' bredde '. Eiendommen ' bredde ” definerer bredden for bildene og teksten. Den inneholder ikke marger, utfylling eller kanter. Den kan angi størrelsen på bilder og tekst i formen cm, px eller %. For å gjøre et bilde responsivt, tilordne ganske enkelt ' bredde ' eiendom til ' 100 %'. Innstilling ' bredde: 100 % ;” betyr at bildet blir like stort som det overordnede elementet:
img {bredde : 100 % ;
høyde : auto ; }
Ovenstående bekrefter at bildet er responsivt. For å sjekke om den er responsiv eller ikke, endre størrelsen på nettleservinduet.
Metode 3: Bruk mediesøk
CSS-mediespørringer hjelper brukerne med å endre utseendet til en nettside. CSS-mediespørring inneholder betingelser, når disse betingelsene er oppfylt, vil det endre utseendet til enheten eller nettleseren. Medieforespørsler kan også hjelpe brukerne med å gjøre bilder responsive. Av den grunn spesifiser først '@ media '-taggen og spesifiser deretter ' maks bredde ” egenskap og tilordne maksimal bredde for et bilde innenfor klammeparentesene. Når denne betingelsen oppfyller, vil bildet bli responsivt. Etter det, legg til de krøllete klammeparentesene spesifiser img-taggen, og spesifiser ' bredde: 100 % ;” verdi:
@media ( maks bredde : 480 piksler ) {img {
bredde : 100 % ;
}
}
Merk : bildet vil bare reagere hvis det oppfyller den angitte betingelsen.
CSS-mediespørringen har blitt brukt, og nå ville bildet oppføre seg like responsivt hvis det endres til den angitte bildestørrelsen. Ellers vil den ikke reagere:
Konklusjon
For å gjøre bilder responsive med HTML og CSS, har brukere ulike metoder. Disse metodene inkluderer å gjøre bilder responsive ved å bruke ' maks bredde ' eiendom, ' bredde ”-egenskapen, og også ved å bruke CSS-mediespørringen. Denne artikkelen har presentert brukerne med den komplette løsningen for å gjøre bilder responsive.