percent-height-overflowing-image-1-ref.html (1865B)
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Reference case for %-height potentially-overflowing images</title> 5 <style> 6 .container { 7 height: 80px; 8 border: 2px solid purple; 9 margin: 1px; 10 display: inline-block; 11 } 12 .percent-size { 13 display: block; 14 height: 100%; 15 border: 2px solid black; 16 box-sizing: border-box; 17 } 18 .scrollX { 19 overflow-x: scroll; 20 } 21 .scrollBoth { 22 overflow: scroll; 23 } 24 </style> 25 </head> 26 <body> 27 <div class="container scrollX" style="width: 50px; height: 120px"> 28 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 29 </div> 30 <div class="container scrollX" style="width: 60px; height: 120px"> 31 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 32 </div> 33 <br> 34 35 <div class="container scrollBoth" style="width: 78px"> 36 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 37 </div> 38 <div class="container scrollBoth" style="width: 79px"> 39 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 40 </div> 41 <br> 42 43 <div class="container" style="width: 80px"> 44 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 45 </div> 46 <div class="container" style="width: 90px"> 47 <img class="percent-size" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQImWP4DwUMMAAAa6YH+b3nj3MAAAAASUVORK5CYII="> 48 </div> 49 </body>