object-fit-containcontainintrinsicsize-png-001i.tentative.html (1876B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <meta charset="utf-8"> 9 <title>CSS Test: 'object-fit: contain' and 'contain-intrinsic-size' on img element, embedding a PNG image</title> 10 <link rel="author" title="Eric Portis" href="mailto:e@ericportis.com"> 11 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10116"> 12 <link rel="match" href="object-fit-containsize-png-001-ref.tentative.html"> 13 <style type="text/css"> 14 img { 15 border: 1px dashed gray; 16 padding: 1px; 17 image-rendering: pixelated; 18 float: left; 19 object-position: top left; 20 contain: size; 21 } 22 br { 23 clear: both; 24 } 25 .big { 26 contain-intrinsic-width: 32px; 27 contain-intrinsic-height: 48px; 28 } 29 .small { 30 contain-intrinsic-width: 8px; 31 contain-intrinsic-height: 8px; 32 } 33 34 .cover { object-fit: cover } 35 .contain { object-fit: contain } 36 .fill { object-fit: fill } 37 .none { object-fit: none } 38 .scaledown { object-fit: scale-down } 39 40 </style> 41 </head> 42 <body> 43 <!-- big: --> 44 <img src="support/colors-16x8.png" class="big cover"> 45 <img src="support/colors-16x8.png" class="big contain"> 46 <img src="support/colors-16x8.png" class="big fill"> 47 <img src="support/colors-16x8.png" class="big none"> 48 <img src="support/colors-16x8.png" class="big scaledown"> 49 <br> 50 <!-- small: --> 51 <img src="support/colors-16x8.png" class="small cover"> 52 <img src="support/colors-16x8.png" class="small contain"> 53 <img src="support/colors-16x8.png" class="small fill"> 54 <img src="support/colors-16x8.png" class="small none"> 55 <img src="support/colors-16x8.png" class="small scaledown"> 56 <br> 57 </body> 58 </html>