<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>CSS object-fit</h1> <section id="plain"> <h1>original images</h1> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt> </section> <section> <h1>Base style: <code>img { width: 200px; height: 200px; border: 1px solid; background: #eee; }</code></h1> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt> <h2>Images squished</h2> </section> <section class="contain"> <h1>Base style + <code>img { object-fit: contain }</code></h1> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt> <h2>Images letterboxed, correct aspect ratio maintained</h2> </section> <section class="cover"> <h1>Base style + <code>img { object-fit: cover; }</code></h1> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt> <h2>Images expand to cover width and height, correct aspect ratio maintained</h2> </section> <section class="none"> <h1>Base style + <code>img { object-fit: none; }</code></h1> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/apex.jpg" alt> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/le-helicron.jpg" alt> <h2>Images expand to actual size, cropped inside set width and height, correct aspect ratio maintained</h2> </section>

body { font-family: Avenir, sans-serif; margin: 0; text-align: center; } h1, h2 { font-weight: 100; } section:nth-child(even) { background: #ccc; } #plain img { width: 45%; max-width: 300px; height: auto; margin: 2.5%; } section h1 { font-weight: 600; padding-top: 3rem; } code { font-family: inherit; font-weight: 100; } section img { width: 200px; height: 200px; border: 1px solid; background: #eee; } section.contain img { object-fit: contain; } section.cover img { object-fit: cover; } section.none img { object-fit: none; }