grid-item-no-aspect-ratio-stretch-2-ref.html (1047B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Reference: stretching works for replaced items with no 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 <style> 7 body { 8 line-height: 0; 9 } 10 11 div { 12 display: inline-block; 13 height: 250px; 14 width: 350px; 15 background: grey; 16 margin: 10px; 17 vertical-align: top; 18 } 19 20 img { 21 display: block; 22 width: 300px; 23 height: 150px; 24 } 25 26 .justify { 27 width: 350px; 28 } 29 .align { 30 height: 250px; 31 } 32 </style> 33 <div> 34 <img class="align justify"> 35 </div> 36 <div> 37 <img class="align" style="width:20px"> 38 </div> 39 <div> 40 <img class="justify"> 41 </div> 42 <div> 43 <img style="width:20px"> 44 </div> 45 46 <script> 47 var url = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20px"><circle cx="50%" cy="50%" r="50%" fill="blue"/></svg>' 48 var imgs = document.querySelectorAll('img'); 49 for (var i = 0; i < imgs.length; ++i) { 50 var img = imgs[i]; 51 img.src = url; 52 } 53 </script>