CSS Force Image Endre størrelse og oppbevar sideforhold

Mens de designer nettsteder, søker utviklere alltid etter måter å justere websiden slik at bildene eller andre komponenter vises perfekt i hver skjermstørrelse. Mer spesifikt hjelper det kaskaderende stilarket eller CSS til å gjøre et ordentlig utseende for websidene. Det gir stylingegenskaper og egenskaper som hjelper til med å opprettholde oppsett, størrelse og aspektforhold på bildene.

Denne oppskrivningen vil demonstrere tre etter tre metoder:

• Metode 1: Force Image Endre størrelse og beholde sideforholdet ved å bruke “bredde”Og“høyde”CSS -egenskaper
• Metode 2: Force Image Endre størrelse og beholde sideforholdet ved å bruke “Objekt-fit”CSS -eiendom
• Metode 3: Force Image Endre størrelse og beholde sideforholdet ved å bruke “Display: Flex”CSS -eiendom

Forutsetning: Legg til bilde i HTML -filen

Før, beveger du deg videre, spesifiser "”Element i HTML -filen for å legge til et bilde i dokumentet:

Metode 1: Kraftbilde Størrelse og beholde sideforholdet ved bruk av "bredde" og "høyde" CSS -egenskaper

“bredde”Og“høyde”Egenskaper kan brukes til å justere bildet. Videre kan breddeegenskapen med en spesifisert verdi og høydeegenskapen med bil eller omvendt hjelpe til med å endre størrelsen på bildet og beholde aspektforholdet.

Stil “IMG” -element

“”Element er spesifisert med følgende egenskaper:

IMG
Bredde: 400px;
Høyde: Auto;

Her:

• “bredde”Bestemmer bildets bredde.
• “høyde”Angir bildehøyden.

Produksjon

La oss nå sette bredden som auto og se resultatene.

I CSS, sett "høyde”Eiendom med en viss verdi og“bredde" som "bil”:

Høyde: 400px;
Bredde: Auto;

Den gitte utgangen betyr at bildet er endret, og at sideforholdet også opprettholdes:

Metode 2: Force Image Endre størrelse og beholde sideforholdet ved bruk av “Object-Fit” CSS-egenskap

CSS “Objekt-fit”Eiendom med verdien”inneholde”Kan brukes til å justere bildet uten å påvirke dets sideforhold.

For å gjøre det, bruk følgende CSS -egenskaper på den ekstra HTML “”Element:

Bredde: 400px;
Høyde: 400px;
objekt-fit: inneholde;

“Objekt-fit”Eiendom med verdien”inneholde”Angir hvordan et bilde eller en video skal endres for å passe inn i beholderen.

Produksjon

Metode 3: Force Image Endre størrelse og oppbevar sideforhold ved å bruke “Display: Flex” CSS -egenskap

“vise”Eiendom med verdien”Flex”Plasser varene i den fleksible beholderen på rad (som standard).

Eksempel

For det første, legg til en "”Med klassen“hoved-”. Deretter:

• Legg til to bilder ved å bruke “" -merkerne.
• “src" og "alt”Attributter er nevnt for bilde -URL og den alternative teksten til bildet hvis det i noe tilfelle ikke kunne vises:

Stil “Main” -klasse

“.hoved-”Brukes til å få tilgang til“ ”-elementet med det spesifiserte klassenavnet. Følgende egenskaper brukes på det:

.hoved
Display: Flex;
Bredde: 100%;

Her:

• “vise”Eiendom med verdien”Flex”Plasser bildene på rad.
• “bredde”Eiendom bestemmer den fleksible beholderens bredde.

Stil “IMG” -element i “Main” -klassen

.Main IMG
Bredde: 50%;
Høyde: Auto;

“img”Element holder“50%”Bredde og“høyde”Er satt som“bil”Og justerer høyden på beholderen automatisk.

Produksjon

Du har lært hvordan du tvinger bilder til å endre størrelse og beholde sideforholdet i CSS.

Konklusjon

Det er alternative måter å endre størrelsen på bildet på og beholde dets sideforhold i CSS, som å sette en spesifikk verdi av "bredde”Eiendom og“bil”Verdi for“høyde”Eiendom til bildet eller omvendt. CSS “Objekt-fit”Eiendom med verdien”inneholde”Er den beste metoden. Dessuten "Display: Flex”Eiendom kan også brukes til å opprettholde sideforholdet til bildet. Denne oppskrivningen har forklart metodene for å demonstrere hvordan du kan endre størrelse på et bilde og opprettholde dets sideforhold i CSS.