Slik utformer du fleksible bilder for RWD

Dette er det siste innlegget i fokuset Responsible Web Design. Den første introduserte RWD, gjennomgikk muttere og bolter og forklarte hvorfor det burde være nødvendig for nettsteder. Det andre innlegget viste deg hvordan du oppretter mediesøk og får nettstedene dine enda et skritt nærmere universell respons på alle enheter. I dette innlegget vil jeg gjennomgå hvordan du får bildene og videoene dine til å bli fleksible sammen med det andre innholdet. HTML- og CSS-koden for demosidene som brukes nedenfor finner du i den tilhørende nedlastingen, slik at du kan følge lenge.

Fleksible bilder

Nå som vi har vårt maksimale og, i noen tilfeller, minste oppløsning som er innstilt til å justere når forskjellige enheter blir oppdaget, må vi nå jobbe med å gjøre bildene våre fleksible også. Tekst tar allerede vare på seg selv og pakker seg inn i de gitte containere når de endrer størrelse, som vist på vår demoside fra forrige innlegg. Figur A viser testsiden for iPhone; Vær imidlertid oppmerksom på at den ikke inneholder noen bilder.

Figur A

Som en tommelfingerregel har vi alltid fått beskjed om å stille bildene til en spesifikk høyde og bredde i piksler, men ulempen med å stille absolutte bildestørrelser er selvfølgelig at de ikke er fleksible. Derfor blir faste bildedimensjoner vanskelig å se i mindre skjermstørrelser og oppløsninger. De faste bildene er kanskje perfekte for stasjonære eller bærbare skjermer, men mislykkes når de er gjengitt på mindre enheter.

Først vil vi legge til et bilde med fast bredde som med vilje er større enn den maksimale bredden på beholderen ved 800 px x 600 px, som vist i figur B.

Figur B

Vi legger nå til følgende linje mellom første og andre ledd i artikkelen, i/servers.gif"> . Når du viser demosiden i Chrome 20.0 i figur C, kan du se at det 800px brede bildet ser litt stort ut i full visning.

Figur C

Når vi skalerer nettleseren ned til en bredde på 1040 piksler, ser vi imidlertid at bildet blør til høyre side av artikkelbeholderen, som vist i figur D.

Figur D

Regelen for å holde bilder inne i beholderen er faktisk ganske enkel. Med bildemaksbredde-stilen satt til 100%, sier vi effektivt at bildet vil samsvare med bredden på beholderen det er inkludert i:

 img { 
 maks bredde: 100%; 
 } 
Oppdater skjermen og reduser det synlige området til 965px, og legg merke til at bildet nå endres til å passe til beholderen når det utvides eller trekkes sammen til den tilgjengelige plassen ( figur E ).

Figur E

Og nå vises den samme demonstrasjonssiden som ble vist på iPhone-testsimuleringssiden i Chrome 20.0 nedenfor.

Figur F

Moderne nettlesere har utviklet muligheten til å endre størrelse på bilder og andre objekter proporsjonalt, slik at når en fleksibel beholder krymper eller vokser, vil størrelsesforholdet forbli det samme. Når vi snakker om objekter, kan vi slå opp velgeren vår for å inkludere innebygde objekter og videoobjekter:

 img, embed, object, video { 
 maks bredde: 100%; 
 } 

IE 6 og lavere

IE 6 og lavere svarer ikke på maksimal breddebegrensning, men vil svare på en bredderegel på 100%, så et eget stilark for IE6 ville være nødvendig hvis du vet at kundene dine fortsatt kjører på den gamle nettleseren.

 img, embed, object, video { 
 bredde: 100%; 
 } 

Selv om dette vil løse problemet med større bilder, som må skaleres ned og matche den maksimale bredden på beholderen, vil dette også tvinge små bilder som miniatyrbilder, som er mindre enn den tilhørende beholderen, til å utvide seg for å få plass til maksimal plass. Hvis du ikke vil at et bilde skal skaleres opp, må en annen velger opprettes.

Ethan Marcotte har en annen måte å håndtere eldre nettlesere og få flytende bilder til å endre størrelse på og oppføre seg godt med dette skriptet, som går gjennom nettdokumentet og automatisk beregner riktig proporsjonal høyde og bredde på bildet, og endrer størrelse på avstandsbildet tilsvarende.

© Copyright 2020 | mobilegn.com