object-view-box-fit-cover-template.html (1212B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS object-view-box with object-fit:contain</title> 4 <link rel="author" href="mailto:khushalsagar@chromium.org"> 5 <link rel="match" href="object-view-box-fit-cover-__NAME__-ref.html"> 6 <script src="support/testHelper.js"></script> 7 <link rel="help" href="https://drafts.csswg.org/css-images-4/#the-object-view-box"> 8 9 <body> 10 <style> 11 .view_box_subset { 12 object-view-box: inset(50px 0px 0px 0px); 13 object-fit: cover; 14 width: 40px; 15 height: 50px; 16 margin: 5px; 17 } 18 19 .view_box_subset_with_position { 20 object-view-box: inset(50px 0px 0px 0px); 21 object-fit: cover; 22 width: 40px; 23 height: 50px; 24 margin: 5px; 25 object-position: 0% 0%; 26 } 27 28 .view_box_subset_with_scaling { 29 object-view-box: inset(50px 0px 0px 0px); 30 object-fit: cover; 31 margin: 5px; 32 width: 50px; 33 height: 100px; 34 /* The top row of pixels can have minor differences due to mismatch in order 35 of clipping and scaling operations */ 36 clip-path: inset(1px 0px 0px 0px); 37 } 38 </style> 39 </body> 40 <__TAG__ class="view_box_subset"></__TAG__> 41 <__TAG__ class="view_box_subset_with_position"></__TAG__> 42 <__TAG__ class="view_box_subset_with_scaling"></__TAG__> 43 </body> 44 <script> 45 populateElements("__IMAGE_SOURCE__"); 46 </script>