object-fit-cover-png-002.xhtml (2224B)
1 <?xml version="1.0"?> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 7 <style xmlns="http://www.w3.org/1999/xhtml"><![CDATA[ 8 window { padding: 8px; } 9 image { 10 border: 1px dashed gray; 11 padding: 1px; 12 object-fit: cover; 13 image-rendering: -moz-crisp-edges; 14 } 15 16 .bigWide { 17 width: 52px; 18 height: 36px; 19 } 20 .bigTall { 21 width: 36px; 22 height: 52px; 23 } 24 .small { 25 width: 12px; 26 height: 12px; 27 } 28 29 br { clear: both; } 30 31 .tr { object-position: top right } 32 .bl { object-position: bottom left } 33 .tl { object-position: top 25% left 25% } 34 .br { object-position: bottom 1px right 2px } 35 36 .tc { object-position: top 3px left 50% } 37 .cr { object-position: top 50% right 25% } 38 ]]></style> 39 <hbox> 40 <!-- big/wide: --> 41 <image src="colors-8x16.png" class="bigWide tr"/> 42 <image src="colors-8x16.png" class="bigWide bl"/> 43 <image src="colors-8x16.png" class="bigWide tl"/> 44 <image src="colors-8x16.png" class="bigWide br"/> 45 <image src="colors-8x16.png" class="bigWide tc"/> 46 <image src="colors-8x16.png" class="bigWide cr"/> 47 <image src="colors-8x16.png" class="bigWide"/> 48 </hbox> 49 <hbox> 50 <!-- big/tall: --> 51 <image src="colors-8x16.png" class="bigTall tr"/> 52 <image src="colors-8x16.png" class="bigTall bl"/> 53 <image src="colors-8x16.png" class="bigTall tl"/> 54 <image src="colors-8x16.png" class="bigTall br"/> 55 <image src="colors-8x16.png" class="bigTall tc"/> 56 <image src="colors-8x16.png" class="bigTall cr"/> 57 <image src="colors-8x16.png" class="bigTall"/> 58 </hbox> 59 <hbox> 60 <!-- small: --> 61 <image src="colors-8x16.png" class="small tr"/> 62 <image src="colors-8x16.png" class="small bl"/> 63 <image src="colors-8x16.png" class="small tl"/> 64 <image src="colors-8x16.png" class="small br"/> 65 <image src="colors-8x16.png" class="small tc"/> 66 <image src="colors-8x16.png" class="small cr"/> 67 <image src="colors-8x16.png" class="small"/> 68 </hbox> 69 </window>