Here is the question for you before talking about our topic. How would you address an image  stretches or squeezes itself to fill it’s content box?

In fact, this may be needed when a image you have has a different size or aspect ratio from the place you’ve designated for it in a layout.  To solve this problem you would create a div and set background-image and background-size.

div {
        background-image : url('path/to/your/image/image.jpg');
        background-size: cover;
        width : 300px;
        height : 300px;
        }

However, if you want to do this for your video tag, you may have to do so much tedious work achieving your requirement. But In modern CSS (CSS3) , your work will be much easier,thanks to the object fit and object position attributes. The property object-fit works slimier to traditional  background size property, While the property object position works slimier to background position attribute. There are two important features  relating with those modern properties.

  • Both object-fit and object-position properties are directly applied to the tag ( img or video)
  • Unlike traditional background properties, both properties can be used with video tag too.

Object fit property

The possible values it receives are given below with examples. Play with demo examples and enjoy.

Please note that, above all cases are also work with video tag as mentioned previously.

Object Position Property

This property defines where inside the container the image will be positioned. It takes two numerical values, one for the left-right axis and another for the top-bottom axis. These numbers can be in percentages, pixels or other measuring units, and can be negative. Some keywords such as center, top, right, etc. can be used as well. Please also note that, accepted property values are slimier to the values for background position. By default an image is positioned in the center of a container.

Demo : http://mayaprojects.net/madu-experiments/blogpost/07022016/object-position.php

Browser Support

the browser support for object-fit and object-position is rather inconsistent and in this case it’s IE and Edge that offer no support at all. While waiting for all Microsoft browsers to adopt the two properties you can use this polyfill which fixes the issue nicely. Also, it’s always a good idea to set a background color to all image containers as a fallback.

Conclusion

Object fit and object position properties are great for building responsive web site. You can do experiment and play with those properties before applying those in your web projects. Please let me know your thoughts and questions.

Thanks for reading guys.

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someonePrint this page