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