Normalerweise stellen wir es so ein:
(Teilen von Lernvideos:HTML-Video-Tutorial )
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
Nach dem Login kopieren
Object-Fit-Wertbeschreibung
Object-Fit eignet sich hauptsächlich zum Ersetzen von Elementen wie:
,
,
,
,
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!
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
2024-09-13 06:18:12
2024-09-13 06:16:12
2024-09-13 06:15:12
2024-09-13 06:10:12
2024-09-13 06:07:12
2024-09-13 06:06:12
2024-09-13 06:05:12
2024-09-13 06:04:12
2024-09-13 03:37:09
2024-09-13 03:34:09
