| OLD | NEW | 
| (Empty) |  | 
 |   1 <!DOCTYPE html> | 
 |   2  | 
 |   3 <html> | 
 |   4     <head> | 
 |   5         <title>object-position on images with object-fit:cover</title> | 
 |   6         <style type="text/css"> | 
 |   7             .group > div { | 
 |   8                 display: inline-block; | 
 |   9                 overflow: hidden; | 
 |  10                 width: 72px; | 
 |  11                 height: 72px; | 
 |  12                 margin: 2px 10px; | 
 |  13                 border: 1px solid black; | 
 |  14                 padding: 5px; | 
 |  15                 background-color: gray; | 
 |  16             } | 
 |  17  | 
 |  18             .group > div > div { overflow: hidden; height:100%; } | 
 |  19             .group > div > div > * { display: block; width:144px; height:72px; } | 
 |  20  | 
 |  21             .group > *:nth-child(1) > div > * { margin-left:-72px;; } | 
 |  22             .group > *:nth-child(2) > div > * { } | 
 |  23             .group > *:nth-child(3) > div > * { margin-left: 10px; } | 
 |  24             .group > *:nth-child(4) > div > * { margin-left: 300px; } | 
 |  25             .group > *:nth-child(5) > div > * { margin-left: 300px; } | 
 |  26             .group > *:nth-child(6) > div > * { margin-left: 18px; margin-top:-1
    0px; } | 
 |  27             .group > *:nth-child(7) > div > * { margin-left: 300px; } | 
 |  28             .group > *:nth-child(8) > div > * { margin-left: 300px; } | 
 |  29             .group > *:nth-child(9) > div > * { margin-left: -72px; } | 
 |  30             .group > *:nth-child(10) > div > * { margin-left: 300px; } | 
 |  31             .group > *:nth-child(11) > div > * { margin-left: 30px; margin-top:3
    0px; } | 
 |  32             .group > *:nth-child(12) > div > * { margin-left: -36px; } | 
 |  33         </style> | 
 |  34     </head> | 
 |  35     <body> | 
 |  36  | 
 |  37         <div class="group"> | 
 |  38             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  39             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  40             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  41             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  42             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  43             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  44             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  45             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  46             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  47             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  48             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  49             <div><div><img src="resources/circles-landscape.png"></div></div> | 
 |  50         </div> | 
 |  51  | 
 |  52     </body> | 
 |  53 </html> | 
| OLD | NEW |