0
我正在嘗試做很簡單的事情:將視頻大小調整爲100%的屏幕寬度和100%的屏幕高度。但是,當我將寬度設置爲100%時,高度似乎會自動調整。HTML - 無法正確調整視頻的大小
這裏是我的HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles/index.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
</head>
<body>
<div id="screen_container">
<video autoplay="autoplay" class="cover_vid" loop>
<source src="videos/boats.mp4" type="video/mp4" />
</video>
<input type="button" id="back_abt" class="gen_design" value="Leave">
</div>
<script src="scripts/specific1.js"></script>
</body>
</html>
CSS:
#screen_container
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
.cover_vid
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
我試圖儘可能避免使用JavaScript。我甚至試圖從PHP傳遞屏幕分辨率到視頻元素的寬度和高度屬性,但結果是一樣的。視頻似乎可以做任何想做的事情。
您可能要檢查[這個問題](http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site)。 – Desaroll