RelativeLengths

test CSS relative lengths
Test

  • rem
  • vh
  • vw
  • vmin
  • vmax
%cframe width=7rem bgcolor=lightblue border='3px solid red' padding=2rem% http://pmichaud.com/img/misc/gem.jpg
%width=50vw% http://pmichaud.com/img/misc/bubble.jpg %%

%height=50vh% http://pmichaud.com/img/misc/bubble.jpg %%

Note that for historical reasons inline wikistyles for images and tables don't insert css-styles but html-attributes height, width and align. Browsers expect the height and width attributes to contain numbers and interpret them as pixels. So above, the first picture is 50 pixels wide, the second 50 pixels high; below the table is 40 pixels wide. This may be something we can update. UpdateMe --Petko June 29, 2015, at 02:32 PM

||width=40vmax border=1
|| 40 * 1/100th of the largest side||


|| style="width:40vmax;" border=1
|| 40 * 1/100th of the largest side||


40 * 1/100th of the largest side
40 * 1/100th of the largest side
(:div class="tabtable" style="width:50vmin; border:0.25rem dotted blue":)
div content
(:divend:)

div content

 0: 00.00 00.00 config start
 1: 00.00 00.00 config end
 2: 00.03 00.02 MarkupToHTML begin
 3: 00.03 00.02 MarkupToHTML begin
 4: 00.03 00.02 ReadApprovedUrls SiteAdmin.ApprovedUrls begin
 5: 00.03 00.03 ReadApprovedUrls SiteAdmin.ApprovedUrls end
 6: 00.04 00.03 MarkupToHTML end
 7: 00.04 00.03 MarkupToHTML begin
 8: 00.04 00.03 MarkupToHTML end
 9: 00.04 00.03 MarkupToHTML begin
10: 00.04 00.03 MarkupToHTML end
11: 00.04 00.03 MarkupToHTML begin
12: 00.04 00.04 MarkupToHTML end
13: 00.04 00.04 MarkupToHTML begin
14: 00.04 00.04 MarkupToHTML end
15: 00.16 00.14 MarkupToHTML end
16: 00.16 00.14 MarkupToHTML begin
17: 00.17 00.15 MarkupToHTML end
18: 00.17 00.15 MarkupToHTML begin
19: 00.18 00.16 MarkupToHTML end
20: 00.18 00.16 now
Peak memory: 3,103,696 bytes