Hvordan skalere et bilde proporsjonalt med CSS

Hvordan skalere et bilde proporsjonalt med CSS


Nettlesere automatisk skalere bildet bredde eller høyde, avhengig av hvorvidt en bredde eller høyde ble satt i dine Cascading Style Sheets (CSS) kode. Når du ønsker å skalere til bredde, for eksempel angi en bredde og nettleseren vil ta seg av å matche høyden. Sette bare en høyde fører også leseren til å bruke en bredde som er i forhold til den høyden. Selv om endring av bildestørrelse er best overlates til grafiske tekstbehandlingsprogrammer på grunn av filstørrelse og strekke eller squishing, kan du bruke dette trikset for å endre størrelsen på bilder i CSS på fly og holde dem i forhold.

Bruksanvisning

1 Gå til "Start" på oppgavelinjen i Windows, og skriv "Notepad" eller navnet på en kode editor i søkefeltet. Trykk på "Enter" -tasten for å starte programmet. Naviger til "File" og åpne filen som inneholder koden for websiden, som er mest sannsynlig en HTML-fil.

2 Finn "<link>" koder på toppen av koden for filen og se på innholdet i deres "href" attributter for eventuelle CSS-filer. Når du finner navnet på en CSS-fil, kan du gå tilbake til "Fil" på verktøylinjen og åpne denne filen. Du skal nå ha to filer åpne: en for din webside og en for CSS. Hvis du ikke har en CSS-fil, lage en og legge til "<link>" tag til koden for websiden mellom "<head>" koder:

<Link rel = "stylesheet" href = "sti / til / style.css" type = "text / css" />

3 Få ID-navnet for bildet ved å se på sin "<img>" tag i koden for websiden:

<Img alt = "Et bilde" id = "myimage" />

I koden ovenfor, er "myimage" ID-navn. Legg et ID navn til "<img>" tag hvis man ikke allerede eksisterer.

4 Gå til bunnen av CSS-fil og skrive en velgeren på "velge" bildet av sin ID navn:

myimage {}

Eiendom-verdi-par går i klammeparentes. Det er der du vil plassere kode for å endre størrelsen på bildet.

5 Legg enten en høyde eller bredde til CSS-kode:

myimage {width: 300px; } Myimage {height: 200px; }

Ovenfor er et eksempel på hver type setting. Når du setter en bredde uten en høyde, vil nettleseren automatisk beregne høyden for å skalere. Det motsatte er også sant.

Hint

  • Bruk følgende kode (minus anførselstegn) for å gjøre Internet Explorer bruker en bedre endre størrelse metode: "img {-MS-interpole-modus: bikubisk;}".
  • Endring av bildestørrelse gjort i en grafikk editor er fortsatt å foretrekke å gjøre det i CSS, spesielt når du skalerer ned et stort bilde. I tilfelle av et stort bilde, vil det likevel ta like lang tid å laste, selv når skalert ned.