| 1234567891011121314151617181920212223242526272829303132333435363738394041424344 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Object-fit patterns</title>
- <style>
- body {
- margin: 4em;
- background-color: #ddd;
- }
- img {
- height: 200px;
- width: 200px;
- border: 10px solid #fff;
- border-radius: .25em;
- /* by default, this is object-fit: fill; */
- margin-right: 1em;
- }
- .contain {
- -webkit-object-fit: contain;
- object-fit: contain;
- }
- .cover {
- -webkit-object-fit: cover;
- object-fit: cover;
- }
- /* these two don't have prefixed implementations: */
- .none {
- object-fit: none;
- }
- .scaledown {
- object-fit: scale-down;
- }
- </style>
- </head>
- <body>
- <img src="img/user-avatar.png" alt="User avatar">
- <img class="contain" src="img/user-avatar.png" alt="User avatar">
- <img class="cover" src="img/user-avatar.png" alt="User avatar">
- <img class="none" src="img/user-avatar.png" alt="User avatar">
- <img class="scaledown" src="img/user-avatar.png" alt="User avatar">
- </body>
- </html>
|
