How to use the video tag in HTML5: How to automatically fill in the parent div tag

This article introduces to you about the use of video tags in HTML5: How to automatically fill in the parent div tag, there is a certain reference value, the need for friends can refer to, I hope to help you.

Want video to automatically fill the size of the slow parent div, just add style= "width= 100% to the video tag; height=100%; Object-fit:fill "can.

Object-fit syntax

The syntax of the Object-fit property is very simple:

Object-fit:fill | Contain | Cover | none | Scale-down

Object-fit Value Description

Object-fit is mainly suitable for replacing elements such as:,,,, <video> <object> <input type="image"> <svg> , <svg:image> and <svg:video> etc. Its default value is fill . The Object-fill values are described as follows:

Fill: This value is the default value of Boject-fit, and the size of the replacement content is set to the content box of the fill element, that is, the content of the element expands to a fully populated container's form factor, even if it breaks its intrinsic aspect ratio.

Contain: The replacement element content size maintains a long-width proportional fill element content container whose specific object size is resolved to a containing element's width and height. That is, if you set an explicit height and width on the replacement element, this value causes the content size to be displayed completely at a fixed scale, but still within the element size.

Cover: The replacement element content size maintains a long-width proportional fill element content container whose specific object size is resolved to cover the width and height of the entire element. That is, the replacement element content size maintains the aspect ratio, but changes the width and height to completely overwrite the content element.

None: Replace the contents of the element without resizing to accommodate the inner element's container, which completely ignores any heights and weights set on the element, and is still displayed within the element dimensions.

Scale-down: When the content size is set to non or contain, the specific object becomes smaller.