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:
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!
Was tun mit der Grafikkarte?
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So laden Sie Videos von Douyin herunter
Verwendung zufälliger Funktionen in der C-Sprache
Was ist der Unterschied zwischen Sonnenfinsternis und Idee?
Was bedeutet Chrom?
Detaillierte Erläuterung der Verwendung der Sprintf-Funktion
