grid-item-aspect-ratio-stretch-1.html (1305B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>stretching works for replaced items with a fallback aspect ratio</title> 4 <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1656281"> 8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/6286#issuecomment-866986544"> 9 <link rel="match" href="grid-item-aspect-ratio-stretch-1-ref.html"> 10 <style> 11 body { 12 line-height: 0; 13 } 14 15 div { 16 display: inline-grid; 17 grid-template: 100% / 100%; 18 height: 250px; 19 width: 350px; 20 background: grey; 21 margin: 10px; 22 vertical-align: top; 23 } 24 25 .justify { 26 justify-self: stretch; 27 } 28 .align { 29 align-self: stretch; 30 } 31 </style> 32 <div> 33 <img class="align justify"> 34 </div> 35 <div> 36 <img class="align"> 37 </div> 38 <div> 39 <img class="justify"> 40 </div> 41 <div> 42 <img> 43 </div> 44 45 <script> 46 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 0 50 100"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' 47 var imgs = document.querySelectorAll('img'); 48 for (var i = 0; i < imgs.length; ++i) { 49 var img = imgs[i]; 50 img.src = url; 51 } 52 </script>