Verwendung des Video-Tags in HTML5: So füllen Sie das übergeordnete div-Tag automatisch aus

Dieser Artikel stellt Ihnen die Verwendung des Video-Tags in HTML5 vor: Wie Sie das übergeordnete Div-Tag automatisch ausfüllen. Ich hoffe, dass es für Sie hilfreich ist.

Wenn Sie möchten, dass das Video automatisch die Größe des langsamen übergeordneten Div ausfüllt, fügen Sie einfach style="width= 100%; height=100%; object-fit: fill" zum Video-Tag hinzu.

Object-Fit-Syntax

Die Syntax des Object-Fit-Attributs ist sehr einfach:

object-fit:fill | contain | cover | none | scale-down

Object-Fit-Wertbeschreibung

Object-Fit ist Hauptsächlich geeignet für Ersatzelemente wie: <video>, <object>, <img>, <input type="image">, <svg>, <svg:image> und <svg:video> usw. Der Standardwert ist fill. Die Beschreibung des Objektfüllwerts lautet wie folgt:

fill: Dieser Wert ist der Standardwert von object-fit. Die Größe des Ersetzungsinhalts wird so eingestellt, dass er das Inhaltsfeld des Elements ausfüllt. Der Inhalt des Elements wird so erweitert, dass er die Außenabmessungen des Containers vollständig ausfüllt, auch wenn dadurch das intrinsische Seitenverhältnis gestört wird.

enthalten: Ersetzen Sie die Inhaltsgröße des Elements, um das Seitenverhältnis beizubehalten, um den Elementinhaltscontainer zu füllen, und seine spezifische Objektgröße wird als Breite und Höhe eines enthaltenden Elements analysiert. Das heißt, wenn Sie eine explizite Höhe und Breite für das Ersatzelement festlegen, führt dieser Wert dazu, dass die Größe des Inhalts genau dem festen Verhältnis entspricht, aber immer noch innerhalb der Elementabmessungen liegt.

cover: Ersetzen Sie die Inhaltsgröße des Elements, um das Seitenverhältnis beizubehalten und den Elementinhaltscontainer zu füllen. Die spezifische Objektgröße wird analysiert, um die Breite und Höhe des gesamten Elements abzudecken. Das heißt, die Inhaltsgröße des Ersatzelements behält das Seitenverhältnis bei, ändert jedoch die Breite und Höhe, sodass das Inhaltselement vollständig abgedeckt wird.

keine: Die Größe des Inhalts des ersetzten Elements wird nicht an den Container des inneren Elements angepasst. Der Inhalt ignoriert alle am Element festgelegten Höhen und Gewichte vollständig und wird weiterhin innerhalb der Abmessungen des Elements angezeigt.

Verkleinern: Wenn die Inhaltsgröße auf „Nicht“ oder „Enthalten“ eingestellt ist, wird das jeweilige Objekt kleiner.

Verwandte Empfehlungen:

Beispielcodes für div-Tags in HTML5

Was sind die Tags und allgemeinen Regeln in HTML5? Einführung in HTML5-Tags und -Regeln

Das obige ist der detaillierte Inhalt vonVerwendung des Video-Tags in HTML5: So füllen Sie das übergeordnete div-Tag automatisch aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!