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.






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:

VærdiEffekt
noneBrugeren kan ikke ændre størrelsen på objektet (default)
bothBrugeren kan ændre både højde og bredde på objektet
horizontalBrugeren kan kun ændre bredden på objektet
verticalBrugeren kan kun ændre højden på objektet
initialSætter variablen til default-værdien
inheritSætter variablen til det samme som forældre(parent)-elementet


resize: none
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.

resize: both
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.


resize: horizontal
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.


resize: vertical
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.



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:

  1. 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.
  2. 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.
  3. DIV med indholdet skal have specificeret resize. I dette eksempel sætter vi resize:horizontal
  4. DIV med indholdet skal have specificeret overflow til noget andet end visible. I dette eksempel sætter vi overflow:hidden
  5. Padding, så der kommer luft mellem tekst og ramme specificeres for DIV'en. Her er padding sat til 5px
  6. 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
Værdi
Effekt
noneBrugeren 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:

HTML-Hajen