5 <title>object-position on images with object-fit:contain
</title>
6 <style type=
"text/css">
13 border: 1px solid black
;
15 background-color: gray
;
18 .group > div > div { overflow: hidden
; height:100%; }
19 .group > div > div > * { display: block
; width:72px; height:36px; }
21 .group > *:nth-child(1) > div > * { }
22 .group > *:nth-child(2) > div > * { margin-top: 36px; }
23 .group > *:nth-child(3) > div > * { margin-left: 10px; margin-top: 45px; }
24 .group > *:nth-child(4) > div > * { margin-top: 18px; }
25 .group > *:nth-child(5) > div > * { margin-top: 18px; }
26 .group > *:nth-child(6) > div > * { margin-top: -10px; }
27 .group > *:nth-child(7) > div > * { margin-top: 100px; }
28 .group > *:nth-child(8) > div > * { margin-top: 100px; }
29 .group > *:nth-child(9) > div > * { margin-top: 100px; }
30 .group > *:nth-child(10) > div > * { margin-top: 100px; }
31 .group > *:nth-child(11) > div > * { margin-left: 30px; margin-top: 30px; }
32 .group > *:nth-child(12) > div > * { margin-top: 18px; }
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>