CSS可以通過設置元素的寬度和高度來調整視頻大小,當然還有其他一些屬性可以調整視頻,以下是一些常用的方法:
video {
width: 50%;
height: auto;
}
通過設置視頻的寬度為50%,高度為自適應,可以實現自適應縮放。如果你想按比例縮放,可以設置寬高比,如下所示:
video {
width: 50%;
padding-bottom: 56.25%;
}
這個56.25%是16:9寬高比的視頻的比例,如果是4:3的視頻,那么應該設置成75%。
此外,你還可以通過max-width和max-height屬性來限制視頻的最大尺寸,以免視頻太大超出了頁面的邊界,如下所示:
video {
max-width: 100%;
max-height: 100%;
}
這個代碼可以使視頻的最大寬度和高度分別為頁面的寬度和高度,這樣可以確保視頻不會超出頁面的邊界。
總之,通過CSS可以輕松地調整視頻的大小和比例,只要你熟悉這些屬性的使用方法。
上一篇h5和css3新增屬性
下一篇h5和css3響應式案例