grid-item-intrinsic-ratio-normal-004-ref.html (3020B)
1 <!DOCTYPE HTML> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html><head> 7 <meta charset="utf-8"> 8 <title>Reference: ratio-preserving 'normal' stretch of image with zero ratio</title> 9 <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1315857"> 10 <style type="text/css"> 11 body,html { color:black; background:white; font:16px/1 monospace; padding:0; margin:0; } 12 13 .grid { 14 display: grid; 15 float: left; 16 grid: auto-flow auto / 10px 30px 10px 30px 10px 30px 10px 30px auto auto auto auto; 17 grid-gap: 5px; 18 border:1px solid; 19 } 20 img:nth-child(1n) { background: blue; } 21 img:nth-child(2n) { background: grey; } 22 img:nth-child(3n) { background: tan; } 23 img:nth-child(4n) { background: black; } 24 img { 25 height: 20px; 26 border: 1px solid; 27 } 28 .jend { justify-self: end; } 29 .aend { align-self: end; } 30 .end { justify-self: end; align-self: end; } 31 </style> 32 </head> 33 <body> 34 35 <div class="grid sz"> 36 <img> 37 <img> 38 <img class="jend"> 39 <img class="jend"> 40 <img class="aend"> 41 <img class="aend"> 42 <img class="end"> 43 <img class="end"> 44 <img> 45 <img class="jend"> 46 <img class="aend"> 47 <img class="end"> 48 </div> 49 50 <div class="grid sz t2"> 51 <img> 52 <img> 53 <img class="jend"> 54 <img class="jend"> 55 <img class="aend"> 56 <img class="aend"> 57 <img class="end"> 58 <img class="end"> 59 <img> 60 <img class="jend"> 61 <img class="aend"> 62 <img class="end"> 63 </div> 64 65 <div class="grid"> 66 <img> 67 <img> 68 <img class="jend"> 69 <img class="jend"> 70 <img class="aend"> 71 <img class="aend"> 72 <img class="end"> 73 <img class="end"> 74 </div> 75 76 <div class="grid" style="grid:auto/auto auto"> 77 <img> 78 <img class="jend"> 79 <img class="aend"> 80 <img class="end"> 81 </div> 82 83 <div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> 84 <img> 85 <img class="jend"> 86 <img class="aend"> 87 <img class="end"> 88 </div> 89 90 <script> 91 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="0px"><circle cx="50%" cy="50%" r="50%" fill="pink"/></svg>' 92 var imgSizes = 93 [ 94 ['16px', '20px'], 95 ['16px', '20px'], 96 ['16px', '20px'], 97 ['16px', '20px'], 98 ['16px', '20px'], 99 ['16px', '20px'], 100 ['16px', '20px'], 101 ['16px', '20px'], 102 ['16px', '20px'], 103 ['16px', '20px'], 104 ['16px', '20px'], 105 ['16px', '20px'], 106 ['16px', '20px'], 107 ['16px', '20px'], 108 ['16px', '20px'], 109 ['16px', '20px'], 110 ['16px', '20px'], 111 ['16px', '20px'], 112 ['16px', '20px'], 113 ['16px', '20px'], 114 ['16px', '20px'], 115 ['16px', '20px'], 116 ['16px', '20px'], 117 ['16px', '20px'], 118 ['16px', '20px'], 119 ['16px', '20px'], 120 ['16px', '20px'], 121 ['16px', '20px'], 122 ['16px', '20px'], 123 ['16px', '20px'], 124 ['16px', '20px'], 125 ['16px', '20px'], 126 ['16px', '20px'], 127 ['16px', '20px'], 128 ['16px', '20px'], 129 ['16px', '20px'], 130 ['16px', '20px'], 131 ['16px', '20px'], 132 ['16px', '20px'], 133 ['16px', '20px'], 134 ]; 135 var imgs = document.querySelectorAll('img'); 136 for (var i = 0; i < imgs.length; ++i) { 137 var img = imgs[i]; 138 img.style.width = imgSizes[i][0]; 139 img.style.height = imgSizes[i][1]; 140 img.src = url; 141 } 142 </script> 143 144 </body> 145 </html>