Makzan / I share what I learned

Demo of Object Fit

http://codepen.io/makzan/full/pvKeOb

Screenshot of the demo

I created a demo on the new CSS object-fit property. It’s like background-size cover or contain. But object-fit works on the media instead of the background. The images are treated as content for accessibility purpose. The demo works in Safari, Chrome, Firefox and mobile Safari, mobile Chrome.

Here is the core code example:

.tiles img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Published on 2015-02-27. More articles like this:
- CSS
- Web Technologies

Previous <- .htaccess resources
Next -> Mozilla Easter Egg

📬 Subscribe to Makzan’s Weekly Dispatch

Want productive tips and web technologies links like this in your inbox each week? Sign up for weekly dispatch each week. No spam ever. Just useful content:

What to expect: If you wish to withdraw your consent and stop hearing from us, simply click the unsubscribe link at the bottom of every email we send or contact us at mak@makzan.net. We value and respect your personal data and privacy. To view our privacy policy, please visit our website. By submitting this form, you agree that we may process your information in accordance with these terms.