Fleksible objektstørrelser med resize
Hvad går det ud på?
Når man laver en side på sit site, har man en idé om hvilken størrelse et givent objekt skal have, f.eks. en textbox, et billede eller en tabel, MEN, det kan sagtens tænkes, at læseren gerne vil ændre størrelse af en eller anden grund.
Det kan man gøre med variablen resize. Der er imidlertid nogle begrænsninger på hvilke objekter resize kan bruges på, så derfor kan man komme ud for at skulle være lidt kreativ.
Det kan man gøre med variablen resize. Der er imidlertid nogle begrænsninger på hvilke objekter resize kan bruges på, så derfor kan man komme ud for at skulle være lidt kreativ.
Variablen resize
Når man skal bruge variablen resize, er det vigtigt at elementet ikke er inline eller overflow er sat til visible. I så fald fungerer resize ikke. Overflow skal være sat til scroll, auto, eller hidden. Når man har en resize der fungerer, kan man se det med en grå markering i objektets nederste højre hjørne (med mindre den går i et med den grå baggrundsfarve du anvender). Til resize har du flg. værdier:
resize: none
resize: both
resize: horizontal
resize: vertical
| Værdi | Effekt |
| none | Brugeren kan ikke ændre størrelsen på objektet (default) |
| both | Brugeren kan ændre både højde og bredde på objektet |
| horizontal | Brugeren kan kun ændre bredden på objektet |
| vertical | Brugeren kan kun ændre højden på objektet |
| initial | Sætter variablen til default-værdien |
| inherit | Sætter variablen til det samme som forældre(parent)-elementet |
resize: none
resize: both
resize: horizontal
resize: vertical
Workarounds når resize ikke virker
Workarounds som dem vi skal se på til resize, er ret simple som koncept. Programmeringsmæssigt kan de være noget pillearbejde, fordi man skal skal have modsatrettede kræfter til at arbejde sammen. Så, hvis man går i gang med denne type løsninger, skal man væbne sig med en god portion tålmodighed.
Filosofien, når man skal udtænke workarounds til resize er:
Hvis man skal lave tabeller med søjler der kan varieres i bredden, kan dette ikke bare gøres med en resize på TD-tag'en. Man gør i stedet det, at man i den øverste celle anbringer en DIV, som fylder hele cellen. Denne DIV er det der kan ændre størrelse, hvorved cellen tilpasser sig. Fremgangsmåden er:
Billedtag'en IMG er en af de tags der ikke kan skaleres. Så, er det et billede man skal kunne ændre, er tricket, at man tager et billede der er stort, og skalerer det ned ved at anbringe det i en DIV eller noget tilsvarende. Ved at sætte både max-width og max-height på IMG-tag'en til 100% holder billedet forholdet mellem højde og bredde, og fordi det er max-width og max-height og ikke width og height, kommer der ikke overflow på rammen, men billedet bliver blot så stort som den begrænsende bredde/højde tillader. Her er det en kopi af sitet logo i 1118 x 1026 px i en DIV med width:150px, padding:10px, resize:both og overflow:hidden:
Filosofien, når man skal udtænke workarounds til resize er:
- Tænk i lag af kode
- Er det der skal skaleres beholderen, f.eks. flexbox eller en celle i en tabel, ved at have skalérbart indhold, hvor beholderen kun ændrer størrelse for at tilpasse sig indholdet som ændrer størrelse? Se f.eks. nedenstående eksempel med tabelsøjlen med justérbar bredde
- Er det der skal skaleres indholdet, som styres med en begrænsende tag? Se f.eks. det skalerbare logo længere nede
Hvis man skal lave tabeller med søjler der kan varieres i bredden, kan dette ikke bare gøres med en resize på TD-tag'en. Man gør i stedet det, at man i den øverste celle anbringer en DIV, som fylder hele cellen. Denne DIV er det der kan ændre størrelse, hvorved cellen tilpasser sig. Fremgangsmåden er:
- Selve cellen, dvs. TD-tag'en, skal have padding sat til 0px, så DIV med indhold går helt ud rammerne. Padding, så det ser pænt ud med lidt luft mellem tekst og ramme, skal på DIV'en i stedet.
- Cellen skal sættes til en lille bredde, f.eks. 10 px. Hvis man ikke har specificeret denne bredde, sætter browserene af uransagelige grunde noget afstand mellem ens DIV og højre kant, også selv om man sætter padding til 0.
- DIV med indholdet skal have specificeret resize. I dette eksempel sætter vi resize:horizontal
- DIV med indholdet skal have specificeret overflow til noget andet end visible. I dette eksempel sætter vi overflow:hidden
- Padding, så der kommer luft mellem tekst og ramme specificeres for DIV'en. Her er padding sat til 5px
- Bredden på søjlen, inden man begynder at ændre på den, specificeres ved at sætte en bredde på DIV'en. Her er den sat til 150px. Det der så sker, er at TD siger bredden skal være 10px, men fordi man anbringer noget der er 150px bredt i cellen, bliver bredden tvunget op i de 150px, så det bliver den bredde man ser når siden loader
| Effekt | |
| none | Brugeren kan ikke ændre størrelsen på objektet (default) |
Billedtag'en IMG er en af de tags der ikke kan skaleres. Så, er det et billede man skal kunne ændre, er tricket, at man tager et billede der er stort, og skalerer det ned ved at anbringe det i en DIV eller noget tilsvarende. Ved at sætte både max-width og max-height på IMG-tag'en til 100% holder billedet forholdet mellem højde og bredde, og fordi det er max-width og max-height og ikke width og height, kommer der ikke overflow på rammen, men billedet bliver blot så stort som den begrænsende bredde/højde tillader. Her er det en kopi af sitet logo i 1118 x 1026 px i en DIV med width:150px, padding:10px, resize:both og overflow:hidden:
