Sådan designes fleksible billeder til RWD

Dette er det sidste indlæg i Responsible Web Design-fokus. Den første introducerede RWD, gennemgik møtrikker og bolte og forklarede, hvorfor det burde være påkrævet til websteder. Det andet indlæg viste dig, hvordan du opretter medieforespørgsler og få dine websteder endnu et skridt nærmere universel lydhørhed på alle enheder. I dette indlæg vil jeg gennemgå, hvordan du får dine billeder og videoer til at blive fleksible sammen med det andet indhold. HTML- og CSS-koden for demosiderne, der bruges nedenfor, kan findes i den tilhørende download, så du kan følge længe.

Fleksible billeder

Nu hvor vi har vores maksimale og i nogle tilfælde minimale opløsning indstillet til at justere, når forskellige enheder registreres, er vi nu nødt til at arbejde på at gøre vores billeder også fleksible. Tekst tager allerede sig af sig selv og indpakkes inden for de givne containere, når de ændrer størrelse, som vist på vores demoside fra det sidste indlæg. Figur A viser iPhone-testsiden; bemærk dog, at det ikke indeholder nogen billeder.

Figur A

Som tommelfingerregel har vi altid fået besked om at indstille vores billeder til en bestemt højde og bredde i pixels, men nedadvendelsen ved at indstille absolutte billedstørrelser er, at de ikke er fleksible. Derfor bliver faste billeddimensioner vanskelige at se i mindre skærmstørrelser og opløsninger. De faste billeder er muligvis perfekte til desktop eller bærbar skærm, men mislykkes, når de gengives på mindre enheder.

Først tilføjer vi et billede med en fast bredde, som med vilje er større end den maksimale bredde af beholderen ved 800 px x 600 px, som vist i figur B.

Figur B

Vi tilføjer nu i den følgende linje mellem artiklen første og andet afsnit, i/servers.gif"> . Når du ser demosiden i Chrome 20.0 i figur C, kan du se, at det 800px brede billede ser lidt stort ud i fuld visning.

Fig

Når vi imidlertid skalerer browseren ned til en bredde på 1040 pixels, ser vi, at billedet bløder til højre for artiklecontaineren som vist i figur D.

Figur D

Reglen for at holde billeder i deres container er faktisk ganske enkel. Med billedets maksimale bredde-stil indstillet til 100%, siger vi effektivt, at billedet vil matche bredden af ​​den beholder, som det er inkluderet i:

 img { 
 maks. bredde: 100%; 
 } 
Opdater skærmen og reducer det synlige område til 965px, og bemærk, at billedet nu ændrer størrelse til at passe til artiklebeholderen, når det udvides eller samles til den tilgængelige plads ( figur E ).

Figur E

Og nu vises den samme demonstrationsside vist på iPhone-testsimuleringssiden i Chrome 20.0 nedenfor.

Figur F

Moderne browsere har udviklet muligheden for at ændre størrelsen på billeder og andre objekter proportionalt, så aspektforholdet forbliver det samme, når en fleksibel beholder krymper eller vokser. Når vi taler om objekter, kan vi sparke vores valg til at inkludere indlejrede objekter og videoobjekter:

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

IE 6 og lavere

IE 6 og lavere reagerer ikke på begrænsningen af ​​maksimal bredde, men vil svare på en bredderegel på 100%, så et separat stilark til IE6 ville være nødvendigt, hvis du ved, at dine kunder stadig kører på den gamle browser.

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

Selvom dette vil løse problemet med større billeder, der skal nedskalere og matche den maksimale bredde på beholderen, vil dette også tvinge små billeder såsom miniaturebilleder, som er mindre end den tilhørende container, til at udvide til at passe til den maksimale plads. Hvis du ikke ønsker, at et billede skal skaleres op, skal der oprettes en anden vælger.

Ethan Marcotte har en anden måde at håndtere ældre browsere og få flydende billeder til at ændre størrelsen på og opføre sig godt med dette script, der cirkler gennem webdokumentet og automatisk beregner den korrekte proportionalhøjde og bredde på billedet og ændrer størrelsen på mellemstandsgrafikken i overensstemmelse hermed.

© Copyright 2021 | mobilegn.com