grid-item-intrinsic-ratio-stretch-006-ref.html (3128B)
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: '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 18px 18px 18px 18px; 17 grid-gap: 5px; 18 border:1px solid; 19 align-items: stretch; 20 justify-items: stretch; 21 } 22 img:nth-child(1n) { background: blue; } 23 img:nth-child(2n) { background: grey; } 24 img:nth-child(3n) { background: tan; } 25 img:nth-child(4n) { background: black; } 26 img { 27 height: 20px; 28 border: 1px solid; 29 } 30 .jend { justify-self: end; } 31 .aend { align-self: end; } 32 .end { justify-self: end; align-self: end; } 33 </style> 34 </head> 35 <body> 36 37 <div class="grid sz"> 38 <img> 39 <img> 40 <img class="jend"> 41 <img class="jend"> 42 <img class="aend"> 43 <img class="aend"> 44 <img class="end"> 45 <img class="end"> 46 <img> 47 <img class="jend"> 48 <img class="aend"> 49 <img class="end"> 50 </div> 51 52 <div class="grid sz t2"> 53 <img> 54 <img> 55 <img class="jend"> 56 <img class="jend"> 57 <img class="aend"> 58 <img class="aend"> 59 <img class="end"> 60 <img class="end"> 61 <img> 62 <img class="jend"> 63 <img class="aend"> 64 <img class="end"> 65 </div> 66 67 <div class="grid" style="grid-template-columns: 10px 30px 10px 30px 10px 30px 10px 30px 0px 0px 0px 0px;"> 68 <img> 69 <img> 70 <img class="jend"> 71 <img class="jend"> 72 <img class="aend"> 73 <img class="aend"> 74 <img class="end"> 75 <img class="end"> 76 </div> 77 78 <div class="grid" style="grid:auto/auto auto"> 79 <img> 80 <img class="jend"> 81 <img class="aend"> 82 <img class="end"> 83 </div> 84 85 <div class="grid" style="grid:minmax(auto,30px) 30px/auto auto"> 86 <img> 87 <img class="jend"> 88 <img class="aend"> 89 <img class="end"> 90 </div> 91 92 <script> 93 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>' 94 var imgSizes = 95 [ 96 ['8px', '20px'], 97 ['28px', '20px'], 98 ['16px', '20px'], 99 ['16px', '20px'], 100 ['8px', '20px'], 101 ['28px', '20px'], 102 ['16px', '20px'], 103 ['16px', '20px'], 104 ['16px', '20px'], 105 ['16px', '20px'], 106 ['16px', '20px'], 107 ['16px', '20px'], 108 ['8px', '20px'], 109 ['28px', '20px'], 110 ['16px', '20px'], 111 ['16px', '20px'], 112 ['8px', '20px'], 113 ['28px', '20px'], 114 ['16px', '20px'], 115 ['16px', '20px'], 116 ['16px', '20px'], 117 ['16px', '20px'], 118 ['16px', '20px'], 119 ['16px', '20px'], 120 ['8px', '20px'], 121 ['28px', '20px'], 122 ['16px', '20px'], 123 ['16px', '20px'], 124 ['8px', '20px'], 125 ['28px', '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 ['16px', '20px'], 135 ['16px', '20px'], 136 ]; 137 var imgs = document.querySelectorAll('img'); 138 for (var i = 0; i < imgs.length; ++i) { 139 var img = imgs[i]; 140 img.style.width = imgSizes[i][0]; 141 img.style.height = imgSizes[i][1]; 142 img.src = url; 143 } 144 </script> 145 146 </body> 147 </html>