So stellen Sie die Breite und Höhe des Videos in HTML5 richtig ein

Normalerweise stellen wir es so ein:

(Teilen von Lernvideos: HTML-Video-Tutorial)

<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 Breite und Höhe des Elements, sodass das Video das übergeordnete Element ausfüllt. Fügen Sie einfach style="width= 100%; height=100%; object-fit: fill" zum Video-Tag hinzu.

Object-Fit-Syntax

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

Object-Fit-Wertbeschreibung

Object-Fit eignet sich hauptsächlich zum Ersetzen von Elementen wie: 39000f942b2545a5315c57fa3276f220, 273238ce9338fbb04bee6997e5552b95, a1f02c36ba31691bcfe87b2722de723b, 7bef7aea927d2f5f8223c3d81f9fd570, 486d7a50595533609bc98d44595dc670, 7e441d6a19e1baa5cd948308fc07d711, 49ee62822bf0c6386fbdcf36ecd91df0 usw. Der Standardwert ist fill. Die Beschreibung des Objektfüllwerts lautet wie folgt:

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

contain: Ersetzen Sie die Inhaltsgröße des Elements, um das Seitenverhältnis beizubehalten, um den Elementinhaltscontainer zu füllen, und seine spezifische Objektgröße wird auf die 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 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 wird weiterhin innerhalb der Elementabmessungen angezeigt.

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

Verwandte Empfehlungen: HTML5-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Breite und Höhe des Videos in HTML5 richtig ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!