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 |