This article mainly introduces how the VIDEO label in HTML5 is automatically filled with parent DIV tags, and the introduction is very detailed. It has certain reference value, and interested friends must have read!
If you want VIDEO, you can automatically populate the size of the chord DIV, just add Style = “width = 100%; height = 100%; Object-fit: fill”.Object-fit syntax
Object-fit attribute syntax is very simple:
Object-fit: Fill | Contain | Cover | NONE | Scale-down
Object-fit is mainly suitable for replacement elements, such as:
Fill . The Object-Fill is described as follows:
Fill: This value is the default value of BOject-fit, the size of the replacement content is set to the content box of the fill element, that is, the content of the element is expanded to complete Fill the outer dimensions of the container, even if it breaks its intrinsic aspect ratio. Contain: The replacement element content size maintains a long-width ratio fill element content container, and its specific object size is parsed to a width and height containing an element. That is, if you set a clear height and width on the replacement element, this value will result in the content size, completely in a fixed proportion, but still displayed in the element size. Cover: Alternative element content size Maintains a long width ratio fill element content container, which is parsed to cover the width and height of the entire element. That is to say,The replacement element content is maintained as a width ratio, but changes the width and height to completely cover the content elements.
NONE: The replacement element content does not adjust the size to accommodate the container of the internal element, and the content is completely ignored any height and weight set on the element, and is still displayed in the element size. Scale-Down: When the content size is set Non or Contain, it will cause a specific object to become smaller.
The above is how the VIDEO tag in HTML5 automatically fills all the contents of the parent DIV tag, thank you for reading! The content that wants to share is helpful to everyone, more related knowledge, welcome to pay attention to Tumi Yun Industry News Channel!