你能在 HTML 元素上模擬背景大小:覆蓋嗎?
背景大小:覆蓋是一個重要的 CSS 屬性,用於將圖像縮放到適合容器元素,同時保持其縱橫比。然而,視訊和 img 標籤等 HTML 元素本身不支援此功能。
實現背景大小:用 CSS 覆蓋
幸運的是,存在一個 CSS-唯一能夠有效模擬此行為、消除腳本依賴性的解決方案。技巧如下:
<code class="css">.parent-element-to-video { overflow: hidden; } video { height: 100%; width: 177.77777778vh; /* 100 * 16 / 9 (for 16:9 aspect ratio videos) */ min-width: 100%; min-height: 56.25vw; /* 100 * 9 / 16 (for 16:9 aspect ratio videos) */ }</code>
將影片的高度設定為 100% 可以使其按比例填滿其父元素的高度。計算出的寬度可確保保持影片的寬高比,同時允許影片在必要時放大以覆蓋整個父元素。最小寬度和最小高度可防止影片縮小到低於其自然尺寸。
使視頻居中
要將視頻在其父元素中居中,請添加以下CSS:
<code class="css">/* Merge with above CSS */ .parent-element-to-video { position: relative; /* or absolute or fixed */ } video { position: absolute; left: 50%; /* % of surrounding element */ top: 50%; transform: translate(-50%, -50%); /* % of current element */ }</code>
此方法可確保視頻在所有情況下都完美居中。
注意:如果您的影片具有不同的寬高比,請調整相應地計算寬度和最小高度以保持所需的比例。
以上是如何模擬視訊和圖像等 HTML 元素的“background-size: cover”?的詳細內容。更多資訊請關注PHP中文網其他相關文章!