CSS Endre størrelse/zoomeffekt på bildet mens du holder dimensjoner

Bilder er den viktigste og avgjørende delen av nettutviklingen. Noen ganger legger nettutviklere til forskjellige effekter på bilder for å gjøre websiden mer attraktiv, inkludert å snu bildene, zoome inn, zoome ut effekter og så videre. Mer spesifikt, i zoom-in-prosessen, blir et bilde større i henhold til krav. I en bildesyn er zoom-in-prosessen veldig viktig. For å få denne prosessen kan brukere bruke “skala ()”Og“oversette()”Metoder.

Denne oppskrivningen vil undersøke:

• Hvordan sette inn et bilde i HTML?
• Hvordan endre størrelse på/zoome effekt på et bilde mens du holder dimensjoner i CSS?

Hvordan sette inn et bilde i HTML?

For å legge til et bilde i HTML, må brukerne følge disse uttalte trinnene.

Trinn 1: Lag en "div" -beholder

Først, bruk "div”Element for å lage en“ div ”container. Sett deretter inn en klasseattributt og spesifiser et bestemt navn for det

Trinn 2: Legg til et bilde

Deretter legger du til et bilde ved hjelp av "" stikkord. Inne i IMG -taggen, spesifiser følgende attributter:

• “src”Attributt brukes til å legge til en mediefil.
• “alt”Brukes for å vise teksten på et bilde når bildet ikke vises på grunn av noen grunn:

Det kan observeres at et bilde er lagt til vellykket:

Hvordan endre størrelse på/zoome effekt på et bilde mens du holder dimensjoner i CSS?

For å endre størrelse på/zoome i kraft på et bilde mens du holder dimensjoner, får du tilgang til bildet med en ":sveve”Effekt, og bruk”forvandle”Med verdi”skala (2.0)”

Prøv de gitte instruksjonene nevnt nedenfor for å gjøre det.

Trinn 1: Style "Div" -beholderen

Få tilgang til “Div” -beholderen ved å bruke klassenavnet ”.IMG-innhold”Og bruk de nedenfor listede CSS -egenskapene:

.IMG-innhold
Display: Inline-block;
overløp: initial;
Margin: 20px 100px;
polstring: 40px;
Bredde: 300px;
Høyde: 300px;
bakgrunnsfarge: RGB (233, 146, 16);

Her:

• “vise”Eiendom brukes til å sette skjermen for et bilde. For å gjøre det er verdien av denne egenskapen satt som en “Inline-block”.
• “flyte”Kontrollerer innholdet som er langvarig for å passe inn i et område.
• “margin”Definerer et rom på den ytterste siden av elementets grense.
• “polstring”Brukes til å tildele plass inne i det definerte området.
• “bredde”Brukes for å sette elementets bredde.
• “høyde”Eiendom tildeler den spesielle høyden for et element.
• “bakgrunnsfarge”Angir en farge for baksiden av et element.

Produksjon

Trinn 2: Bruk svevet på bildet

Tilgangsbilde med svevet effekt som “IMG: Hopp”:

IMG: Hopp
Transform: skala (2.0);

Deretter bruker du “forvandle”Eiendom som brukes til å sette 2D- eller 3D -transformasjonen for et element. For det formålet er verdien av denne egenskapen satt som skala (2.0). Mer spesifikt, “skala ()”CSS -funksjon brukes til å definere transformasjonen som brukes til å endre størrelsen på elementet på 2D -planet.

Produksjon

Det handler om dette innlegget for zoom-in-effekten på et bilde mens du holder dimensjoner.

Konklusjon

For å endre størrelse på/zoome i kraft på et bilde, sett først inn et bilde på HTML -siden, og bruk deretter CSS -egenskapene, inkludert "vise”For å angi visningen av elementet og“flyte”, Som brukes til å kontrollere innholdet som er for stort til å passe inn i et område. Etter det får du tilgang til bildet med ":sveve”Effekt og anvende transformasjonseiendommen med verdien”skala (2.0)”For å endre størrelsen på elementet på 2D -flyet. Dette innlegget har forklart metoden for å endre størrelse på/zoome i kraft på et bilde mens du holder dimensjonen.