Codrops Playground

#cssref object-fit by SaraSoueidan

HTML

9
1
<div class="container">
2
  <p>Change the value of the <code>object-fit</code> property to see the image content change accordingly.</p>
3
  <p>
4
    This is the original image:
5
  </p>
6
  <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/object-fit/duck.jpg" alt="">
7
  <p>This is the image after being sized using <code>object-fit</code>:</p>
8
  <img class="fit" src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/object-fit/duck.jpg" alt="">
9
</div>

CSS

22
 
1
body {
2
  color: #555;
3
  font-size: 1.1em;
4
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
5
}
6
7
.container {
8
  margin: 40px auto;
9
  max-width: 700px;
10
}
11
12
img {
13
  max-width: 100%;
14
}
15
16
img.fit {
17
  border: 5px solid maroon;
18
  width: 10em;
19
  height: 10em;
20
  -o-object-fit: contain;
21
  object-fit: contain;
22
}

JS

1
 
1

#cssref object-fit

by SaraSoueidan on

Demo for the Codrops CSS Reference entry object-fit

Codrops Logo Codrops Playground

Version 0.0.9 (alpha)

Codrops Playground is currently in development with many features to come, including mobile support. We are in alpha stage right now, so if you find a bug, please send a mail to playground@codrops.com or use the contact form on Codrops.

If you'd like to stay updated, follow us on Twitter @codrops. Thank you and stay tuned :)