Spesifisere bredde og høyde som prosenter uten skjevt fotoforhold i HTML

Brukere kan bruke skjevheten til et hvilket som helst element for å rotere eller pakke elementet, inkludert bilde, tabell, form og andre horisontale så vel som vertikale akser. Imidlertid, hvis du ikke vil rotere bildet på nettstedet, lar HTML/CSS deg spesifisere høyden og bredden på elementet i prosent i bildekoden.

Dette innlegget vil forklare metoden for å spesifisere bildehøyde og bredde som prosenter uten å skjule andelen.

Hvordan spesifisere bredde og høyde som prosenter uten skjevt fotoripsjoner i HTML?

Med det formål å spesifisere “høyde”Og“bredde”I form av prosenter uten skjevt fotoforhold, sjekk ut følgende metoder:

• Metode 1: Bruk inline styling i HTML
• Metode 2: Bruk CSS -egenskaper

Metode 1: Bruk inline styling i HTML

Brukere kan legge til bildet på en HTML -side ved hjelp av "”Element. For å spesifisere “bredde”Og“høyde”Av bildet uten skjevhet, må du stille inn bildehøyden og bredden i prosentandelen. For praktiske implikasjoner, følg de nedenfor-listede trinnene.

Trinn 1: Lag en div container
Først må du lage en "div”Container ved å bruke“”Element. Legg også til en "stil”Attributt for bruk av CSS -egenskapene i HTML for inline styling. Sett deretter verdien av stilen som "høyde”Med verdien”600px”Og“bredde" som "1000px”.

Trinn 2: Legg til et bilde
Bruk deretter “img”Tag for å legge til et bilde inne i Div -elementet. Legg videre til følgende attributt mellom IMG -tittelen:

• “src”Brukes til å sette inn mediefilen.
• “høyde”Og“bredde”Brukes begge til å bestemme størrelsen på bildet. For å gjøre det settes verdien av disse egenskapene i prosent:

Det kan observeres at bildet legges til med suksess etter å ha spesifisert bredden og høyden i form av prosentandel:

Metode 2: Bruk CSS -egenskaper

Brukere kan også spesifisere "høyde”Og“bredde”Som prosenter i CSS. For å gjøre det, prøv de gitte instruksjonene.

Trinn 1: Lag en div container
Opprinnelig lage en "div" -beholder ved hjelp av "”Element. Sett dessuten inn et klasseattributt i Div -åpningskoden med et bestemt navn.

Trinn 2: Sett inn et bilde
Neste, bruk "”Tag for å sette inn et bilde i HTML -siden. Deretter legger du til “src”Attributt til bildekoden som brukes til å sette inn mediefilen. For eksempel har vi spesifisert bildenavnet som verdien av "SRC" -attributtet:

Trinn 3: Stil “div” container
Få tilgang til Div Container ved å bruke klassenavnet “.IMG-Container”:

.IMG-Container
Margin: 20px;

Deretter bruker du “margin”For å sette plassen utenfor elementet.

Trinn 4: Angi bilde “Høyde” og “Bredde”
Få tilgang til bildet ved hjelp av "img”:

IMG
Høyde: 70%;
Bredde: 50%;

Spesifiser “høyde”Og“bredde”Egenskaper og angi verdien av disse egenskapene i den nødvendige prosentandelen.

Det handlet om å spesifisere høyden og bredden i prosent.

Konklusjon

For å spesifisere høyden og bredden i prosent uten skjev fotoandel i HTML, lag først en "div" -beholder ved hjelp av "

”Element. Deretter legger du til bildet ved hjelp av "" stikkord. Etter det, sett inn “bredde”Og“høyde”Attributter inne i“ "elementet og setter verdien av disse attributtene i prosent. Denne oppskrivningen ledet deg om å spesifisere bredden og høyden i prosent uten å skjule fotoforholdene.