HTML bildeelement

I nettutvikling kan forskjellige teknikker brukes for å gjøre websiden generelt responsive. Mer spesifikt blir bilder lagt til for å forbedre utseendet til nettstedet. Å legge til store eller små bilder kan imidlertid også resultere i noen synlighetsproblemer på forskjellige enheter, eller noen ganger støttes ikke bildeformatet. For å overvinne disse problemene, kan du bruke HTML -taggen.

Denne oppskrivningen vil guide deg om bruken av HTML-elementet.

Hva er HTML -element?

For nettutviklere, HTML “”Element gir fleksibilitet i å spesifisere bilderessurser. Det tillater å legge inn ett eller flere elementer, og ett element i det siste. Nettleseren laster hvert bilde fra og viser det mest passende bildet, og hvis det ikke finner noen kamper, vises bildet som er spesifisert i taggen.

Hvordan bruke HTML -element?

For å bruke HTML -taggen, følg den gitte syntaks:

Beskrivelsen av syntaks ovenfor er listet opp nedenfor:

• “”Er startkoden og“”Er sluttkoden.
• “”Element har versjonene av et bilde. Disse versjonene er i henhold til displayenhetene. Dessuten kan det være flere tagger i bildeelementer.
• “”Tag brukes til å gi kilden”src”Av bildet, størrelsen og andre attributter.

La oss sjekke ut det gitte eksemplet.

Eksempel: Hvordan bruke bilder med forskjellige dimensjoner i HTML?

Dette eksemplet vil demonstrere hvordan nettleseren laster hvert bilde fra kildeelementet og viser det som er mer passende i henhold til skjermstørrelsen. For å gjøre det, bruk tre bilder med forskjellige dimensjoner.

Her er listen over bilder med forskjellige dimensjoner plassert i prosjektmappen:

La oss nå se hvordan disse bildene vil vises med forskjellige skjermstørrelser.

I HTML, først legg til

Tag for overskrift. Da, i “”Element tag, legg til flere tagger med bildene til bildene:

HTML Picture Tag

Beskrivelsen av taggen som er nevnt i ovennevnte kodeseksjon er nevnt nedenfor:

• “”Er startkoden til bildeelementet.
• “”Tag brukes til å gi flere kildebilder.
• “media”Attributt definerer hvilken type medieenhet som HTML -elementet er koblet til for.
• “Srcset”Attributt brukes til å gi nettadressene til forskjellige bilder som må vises.
• “”Taggen, til slutt, brukes som barn, som gir det alternative bildet. Det betyr at hvis noen av bildene fra kildekoden ikke kunne laste inn, blir det spesifiserte bildet brukt som et alternativ.
• “src”Attributt betyr banen til det alternative bildet.
• “alt”Attributt brukes til å legge til alternativ tekst for å vises i tilfelle bildet ikke klarer å laste.
• “bredde”Attributt brukes til å spesifisere bildens bredde i piksler.
• “”Er det lukkende taggen.

Merk: Medieattributtet spesifiserer medieenhetstypene som elementet er koblet til.

Den gitte utgangen nedenfor viser tydelig at bildene er responsive i henhold til skjermstørrelsen på enheten vår. Til å begynne med "IMG1”Med dimensjonen vises 3047 x 1246, og når skjermen er dratt over 500px, så"IMG3" er vist. Til slutt, når dimensjonen overstiger 1000px, “IMG2" vises:

Slik kan du bruke taggen til å gjøre bilder responsive i henhold til skjermstørrelsen vår.

Konklusjon

Bilder spiller en viktig rolle i å gjøre nettstedet attraktivt. For å gjøre nettstedet mer responsivt, kan HTML -elementet dessuten brukes. Denne taggen omfatter taggen og taggen som brukes til å gi flere medieressurser for medieelementer som, og tagger. Denne artikkelen har vist bruken av HTML -elementet og hvordan bilder kan gjøres responsive i henhold til skjermstørrelsen.