CSS Round Image

Bruken av bilder er veldig viktig i HTML -kode, spesielt når du har jobbet med et nettstedsprosjekt som inneholder mange bilder som glir på hjemmesiden eller andre sider. For bruk av bilder i HTML -skriptspråket, har vi en tendens til å bruke "IMG" -merket i den. Disse bildene kan settes til originale størrelser, eller størrelsen kan også endres med tanke på høyde og bredde. Sammen med det gir HTML-språket deg "Border-Radius" -egenskapen for å endre radius for ethvert element som overskrift eller bilde. Når det gjelder bilder, vil det endre hjørneformen til et bilde fra hverandre. Innenfor denne artikkelen vil vi diskutere bruken av grensen-radius-eiendommen for å konvertere et bilde til et avrundet. Vi vil se på bildet som vil bli brukt i HTML -kodene for å forme det rundt den visuelle studiokoden. Du kan se bildet som heter “New.PNG ”festet på skjermbildet nedenfor. Vi vil bruke den i vår visuelle studiokode for å gjøre den runde.

Eksempel 01:

Før vi former et bilde til runde, må vi se hvordan et bilde kan settes inn i HTML -nettsiden uten å endre den opprinnelige formen. Så vi vil bruke “New.PNG ”-bilde i dette stykke HTML -kode. Vi har opprettet en ny HTML -fil i vår nåværende katalog med Windows og kalt den “CSS”. Etter dette åpnet vi den innenfor Visual Studio -koden og la til HTML -skriptet vist nedenfor. Dette skriptet er startet med standard “doctype” HTML -tag etterfulgt av “HTML” enkelttaggen. HTML-taggen viser at dette vil være en HTML-basert webside og HTML-taggen vil være stengt etter alle taggene på slutten.

Etter HTML-taggen har vi de to mest grunnleggende og mest brukte kodene med HTML-filer: Hode- og kroppskoder. Hovedkoden inneholder informasjonen om topptittel og styling. Mens kroppskoden vil inneholde alle data, containere og andre elementer som bruker de andre taggene. Akkurat nå har vi forlatt hodemerket tomt og lagt til overskriftstoden til størrelse “2” og bildet “IMG” -kode i “Body” -merket. Overskriftskoden brukes til å bare sette en overskrift i starten av en HTML -webside mens bildekoden har blitt brukt til å sette inn den nye.PNG -bilde på websiden ved å bruke "SRC" -variabelen.

Vi har også brukt "stilen" -merket i "IMG" -merket for å angi bredden "200 piksler" på et bilde ved hjelp av "bredde" -egenskapen til et bilde. Kroppen og HTML -kodene ble lukket her.

La oss bare lagre koden vår i filen ved å bruke CTRL+S og feilsøke den ved hjelp av "Kjør" -knappen på oppgavelinjen til Visual Studio Code. Den vil be deg om nettleserplattformen du vil at den skal utføres. Vi har valgt Chrome for å kjøre den. Utgangen er vist nedenfor. HTML -nettsiden viser den svarte overskriften i størrelse 2. Bildet har blitt vist med sin opprinnelige form med en annen størrelse. Bredden tilsvarer 200 piksler som satt i stilegenskapen.

La oss se på å forme bildet vårt "runde" innenfor samme HTML -kode. For dette må vi åpne den samme HTML -filen i Visual Studio Code og oppdatere den. Som du vet, ligger endringer i ethvert bildeform i stylingdelen. Så vi må bruke CSS -stylingen i denne samme HTML -koden ved hjelp av en "stil" -merke i overskriften eller "head" -koden. Resten av koden blir liggende intakt og vil ikke bli oppdatert.

Nå, innenfor "stilen" -koden til denne kodeoverskriften, må vi nevne navnet på et element som skal oppdateres (i.e., "IMG" -koden.) Legg til krøllete parenteser og begynn å legge til egenskaper for å endre elementet i henhold til ditt behov. Så vi har brukt "Border-Radius" -egenskapen innenfor de krøllete parentesene til en "IMG" -kode for styling og spesifisering av verdien som 50 prosent. Du kan også legge til piksler over en prosentandel når det gjelder å velge en enhet for enhver numerisk verdi i CSS -styling. Dette handler om endringen. La oss lagre denne koden først. Etter å ha lagret denne koden med Ctrl+S, må vi ganske enkelt kjøre den ved å bruke "Kjør" -knappen fra den visuelle studio -koden Oppgavelinje. Igjen, du må velge nettleseren du vil at den skal vise utdataene sine.

Å kjøre denne koden ville føre oss til utdataene som vist nedenfor. Bruken av grensen-radius eiendomsverdier opptil 5 prosent gjør bildet “nytt.png ”firkant til runde. Kantene ville bli avrundet som vist på bildet nedenfor. Dette handler om å bruke grensen-radius-egenskapen for å konvertere et enkelt firkantet formbilde til en avrundet form eller annen form.

Eksempel 02:

Den samme egenskapen kan brukes på andre måter for å endre formen på et bilde. Innenfor dette eksemplet vil vi se hvordan tilfeldige verdier kan endre formen på et enkelt bilde. Så innenfor kroppskoden til dette HTML -skriptet har vi brukt "IMG" -merket 4 ganger. I alle disse 4 taggene har vi brukt den samme “nye.PNG ”-bilde gjentatte ganger med bredden på 200 piksler for hver form.

For å endre formen på bilder i en stilkode separat, må vi spesifisere dem med forskjellige klasser: A, B, C og D som vist i hver "IMG" -merke. Innenfor stilmerket har vi brukt “IMG” -kodene sammen med deres spesifiserte klasser (A, B, C og D) for å endre hjørnene på hver form separat. Verdiene 50%, 0%, 20%og 250%15%har blitt brukt for henholdsvis 1., 2., 3. og 4. bilder. La oss utføre denne koden for å se resultatene.

De 4 forskjellige formene på ett bilde er generert som vist nedenfor.

De samme eller lignende formene kan oppnås med den enkle egenskapen. Vi har prøvd denne enkle grensen-radius-eiendommen i 4 hjørner sammen med bredde og høydeegenskaper til bilder satt til 150 piksler for alle. La oss lagre og kjøre denne koden.

Ved å bruke enkelt format for grensen-radius-eiendommen, har vi fått de vist-below 4-formene for en enkelt “New.PNG ”-bilde.

Konklusjon:

Bruken og viktigheten av “IMG” -koden har blitt diskutert sammen med bruken av grensen-radius-eiendommen. Vi har diskutert hvordan en grense-radius-egenskap kan endre kantene på ethvert bilde eller gå til forskjellige former med de enkle topp-, bunn-, venstre- og høyre verdier. For dette har vi diskutert veldig enkle og grunnleggende eksempler på HTML -skript ved å bruke et enkelt bilde i "IMG" -merket og style det. Vi har oppnådd målet vårt ved å konvertere et bilde til en firkantet, rund, oval og avrundet kvadratform ved å bruke denne grensen-radius-eiendommen.