So legen Sie die Breite und Höhe des Videos im Video-Tag in HTML5 fest

Der Inhalt dieses Artikels befasst sich mit der Festlegung der Breite und Höhe des Video-Tags in HTML5. Ich hoffe, dass er für Freunde hilfreich ist.

Im Allgemeinen:

<video width="320" height="240" controls="controls">

Aber manchmal stellen wir fest, dass sich die Höhe des Videos nach dem Festlegen nicht geändert hat. Wir können die Breite und Höhe des übergeordneten Elements so einstellen, dass es das Video ausfüllt übergeordnetes Element. Fügen Sie einfach style="width= 100%; height=100%; object-fit: fill" zum Video-Tag hinzu.

object-fit:fill | include | Wertbeschreibung

object-fit eignet sich hauptsächlich zum Ersetzen von Elementen wie:

, , ,

und <video> usw. . Der Standardwert ist <object>. Die Beschreibung des Objektfüllwerts lautet wie folgt: <img><input type="image"><svg><svg:image> fill: Dieser Wert ist der Standardwert von boject-fit, und die Größe des Ersatzinhalts wird so eingestellt, dass er das Inhaltsfeld ausfüllt des Elements, d. h. der Inhalt des Elements wird erweitert, um die Außenabmessungen des Containers vollständig auszufüllen, auch wenn dadurch sein intrinsisches Seitenverhältnis gestört wird. <svg:video>fill

• enthalten: Ersetzen Sie die Elementinhaltsgröße, um das Seitenverhältnis beizubehalten, um den Elementinhaltscontainer zu füllen, und seine spezifische Objektgröße wird als Breite und Höhe analysiert ein enthaltendes Element. 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 Elementinhaltsgröße, um das Seitenverhältnis beizubehalten, um den Elementinhaltscontainer zu füllen, und seine spezifische Objektgröße wird analysiert, um die Breite und Höhe abzudecken des gesamten Elements. 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 ersetzten Elementinhalts wird nicht an den Container des inneren Elements angepasst, der Inhalt ignoriert alle am Element festgelegten Höhen und Gewichte vollständig und bleibt bestehen innerhalb des Elements. Innerhalb der Abmessungen dargestellt.

• Verkleinerung: Wenn die Inhaltsgröße auf

  oder

  eingestellt ist, wird das spezifische Objekt kleiner.

• Empfohlene verwandte Artikel: noncontain

  Domänenübergreifende Codeanalyse von postMessage in HTML5

Das obige ist der detaillierte Inhalt vonSo legen Sie die Breite und Höhe des Videos im Video-Tag in HTML5 fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!