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;
}
Makzan
I teach web design. I write books on HTML5 games development. I host classes on mobile web and app development. I made animation with Adobe Flash (now Animate).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.