我正在创建一个具有固定高度布局（不使用弹性框）的网络应用程序，我也受到宽度的限制。
我想将屏幕从中间切开，穿过中心，高度和宽度都在50％左右。
在屏幕的左边象限中，我不想插入HTML5视频播放器，而在右边象限中，我想插入一些文字和图像。
我可以使用flex-video中指定的技术http://foundation.zurb.com/docs/components/flex-video.html
来维持视频播放器的宽高比然而，视频会溢出到屏幕的下半部分。
无论如何我可以单独使用CSS来解决这个问题吗？
这是我到目前为止所拥有的
<!DOCTYPE html>
<head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family:sans-serif;
color:white;
}
video {
height: 100%;
}
.header{
height: 60px;
background: #002442;
position: relative;
}
.media-card-screen{
background: linear-gradient(to bottom, #004680 0%, #00080f 99%);
position: absolute;
width: 100%;
top:60px;
bottom: 0px;
}
.media-card{
height: calc(100% / 1.75);
}
.video-container{
width: 50%;
display: inline-block;
padding: 20px 20px 0px 20px;
height: 100%;
}
.video{
display: block;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}
.title{
display: inline-block;
position: relative;
vertical-align: top;
height: 50px;
}
.title h1{
margin: 0;
padding: 0;
font-size: 26px;
}
.rating{
/*display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;*/
}
.action-bar-container{
padding: 0;
margin-top: 20px;
list-style: none;
}
.action{
height: 50px;
line-height: 50px;
background: green;
margin: 0;
padding: 0;
}
.title-rating-container{
display:inline-block;
vertical-align: top;
width:49%;
position:relative;
overflow: auto;
height: 100%;
padding: 20px 20px 0px 0px;
}
.move-short-desc{
font-size: 18px;
}
.move-long-desc{
font-size: 18px;
}
.mc-action-bar{
-webkit-box-shadow: 0 2px 2px 0 black;
-ms-box-shadow: 0 2px 2px 0 black;
-moz-box-shadow: 0 2px 2px 0 black;
box-shadow: 0 2px 2px 0 black;
background: #004680;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
white-space: nowrap;
padding: 0px 0px 0px 20px;
margin-top: 20px;
}
.more-like-this-bar{
height: 50px;
line-height: 50px;
background-color: rgba(0, 70, 128, 0.4);
}
.more-like-this-bar h3{
margin: 0px 0px 0px 20px;
padding: 0;
}
</style>
</head>
<body>
<div class="master-container">
<div class="header">
</div>
<div class="media-card-screen">
<div class="media-card">
<div class="video-container">
<div class="video">
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
</div>
</div>
<div class="title-rating-container">
<div class="title">
<h1>Captain Phillips</h1>
</div>
<img style="float:right; margin: 5px; width: 150px;" src="http://placehold.it/150x255">
<div class="rating">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Pg_cinema.png/626px-Pg_cinema.png" width="50" height="50">
</div>
<div class="expires">
<h3>Expires: 3hrs</h3>
</div>
<div class="duration">
<h3>Duration: 128mins</h3>
</div>
<div class="move-short-desc">
<p>The true story of Captain Richard Phillips and the 2009 hijacking by Somali pirates of the US-flagged MV Maersk Alabama, the first American cargo ship to be hijacked in two hundred years.</p>
</div>
<div class="move-long-desc">
<p>Two-time Academy Award winner Tom Hanks teams with Oscar-nominated director Paul Greengrass and screenwriter Billy Ray to tell the true story of Richard Phillips, a U.S. cargo-ship captain who surrendered himself to Somali pirates so that his crew would be freed. The MV Maersk Alabama was en route to Mombasa, Kenya, when it was surrounded and boarded by a gang of hardened bandits led by the determined Muse (Barkhad Abdi). As the crew of the Maersk Alabama rushed into a fortified "secure room" created for just such an incident, Phillips and Muse found themselves in a tense standoff that threatened to erupt into violence at any moment. Catherine Keener and Michael Chernus co-star. ~ Jason Buchanan, Rovi</p>
</div>
</div>
</div>
<div id="actionBar" class="mc-action-bar">
<div class="mc-action-button" data-call-to-action-button="buy">
<i class="icon-shopping-cart"></i><span>Buy</span>
</div>
<div class="mc-action-button" data-call-to-action-button="favourites">
<i class="icon-heart"></i><span>Remove From Favourites</span>
</div>
</div>
<div class="more-like-this">
<div class="more-like-this-bar">
<h3>MORE LIKE THIS</h3>
</div>
<div class="more-like-this-scroller-container">
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：9)
我最近解决了同样的问题（请参阅http://jsfiddle.net/6PXhP/或以下）：
<div class="aspect-ratio aspect-ratio-16-9">
<iframe width="560" height="315" src="//www.youtube-nocookie.com/embed/ZjsbbdsFOOU?rel=0" frameborder="0" allowfullscreen=""></iframe>
</div>
在CSS中：
.aspect-ratio {
position: relative;
max-width: 100%;
height: auto;
}
.aspect-ratio > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.aspect-ratio-16-9 {
padding-top: 56.25% !important;
}
其中56.25％是9/16 * 100％。
答案 1 :(得分：2)
您可以让video对象自动调整大小，一旦视频加载（按下播放时），它将保持宽高比，如img标记所示：
css：
video{
width:100%;
height:auto;
}
html：
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
答案 2 :(得分：0)
我使用max-height和min-height属性开始工作。
不幸的是，测试时视频链接已关闭，因此我无法验证容器内的视频是否已正确呈现。
此外，我将.video-container更改为浮动块，并重新移除.video个样式。
以下是完整修改后的代码：
<!DOCTYPE html>
<head>
<style>
*{
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family:sans-serif;
color:white;
}
video {
height: 100%;
width: 100%;
min-height: 100%;
max-height: 100%;
}
.header{
height: 60px;
background: #002442;
position: relative;
}
.media-card-screen{
background: linear-gradient(to bottom, #004680 0%, #00080f 99%);
position: absolute;
width: 100%;
top:60px;
bottom: 0px;
}
.media-card{
height: calc(100% / 1.75);
}
.video-container{
width: 50%;
display: block;
float: left;
padding: 20px 20px 0px 20px;
height: 100%;
}
/*.video{
display: block;
overflow: hidden;
height: 0;
padding-bottom: 56.25%;
}*/
.title{
display: inline-block;
position: relative;
vertical-align: top;
height: 50px;
}
.title h1{
margin: 0;
padding: 0;
font-size: 26px;
}
.rating{
/*display: inline-block;
vertical-align: top;
position: absolute;
right: 0px;*/
}
.action-bar-container{
padding: 0;
margin-top: 20px;
list-style: none;
}
.action{
height: 50px;
line-height: 50px;
background: green;
margin: 0;
padding: 0;
}
.title-rating-container{
display:inline-block;
vertical-align: top;
width:49%;
position:relative;
overflow: auto;
height: 100%;
padding: 20px 20px 0px 0px;
}
.move-short-desc{
font-size: 18px;
}
.move-long-desc{
font-size: 18px;
}
.mc-action-bar{
-webkit-box-shadow: 0 2px 2px 0 black;
-ms-box-shadow: 0 2px 2px 0 black;
-moz-box-shadow: 0 2px 2px 0 black;
box-shadow: 0 2px 2px 0 black;
background: #004680;
height: 50px;
line-height: 50px;
text-align: left;
overflow: hidden;
white-space: nowrap;
padding: 0px 0px 0px 20px;
margin-top: 20px;
}
.more-like-this-bar{
height: 50px;
line-height: 50px;
background-color: rgba(0, 70, 128, 0.4);
}
.more-like-this-bar h3{
margin: 0px 0px 0px 20px;
padding: 0;
}
</style>
</head>
<body>
<div class="master-container">
<div class="header">
</div>
<div class="media-card-screen">
<div class="media-card">
<div class="video-container">
<div class="video">
<video id="video" controls="" preload="none">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>
</div>
</div>
<div class="title-rating-container">
<div class="title">
<h1>Captain Phillips</h1>
</div>
<img style="float:right; margin: 5px; width: 150px;" src="http://placehold.it/150x255">
<div class="rating">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7f/Pg_cinema.png/626px-Pg_cinema.png" width="50" height="50">
</div>
<div class="expires">
<h3>Expires: 3hrs</h3>
</div>
<div class="duration">
<h3>Duration: 128mins</h3>
</div>
<div class="move-short-desc">
<p>The true story of Captain Richard Phillips and the 2009 hijacking by Somali pirates of the US-flagged MV Maersk Alabama, the first American cargo ship to be hijacked in two hundred years.</p>
</div>
<div class="move-long-desc">
<p>Two-time Academy Award winner Tom Hanks teams with Oscar-nominated director Paul Greengrass and screenwriter Billy Ray to tell the true story of Richard Phillips, a U.S. cargo-ship captain who surrendered himself to Somali pirates so that his crew would be freed. The MV Maersk Alabama was en route to Mombasa, Kenya, when it was surrounded and boarded by a gang of hardened bandits led by the determined Muse (Barkhad Abdi). As the crew of the Maersk Alabama rushed into a fortified "secure room" created for just such an incident, Phillips and Muse found themselves in a tense standoff that threatened to erupt into violence at any moment. Catherine Keener and Michael Chernus co-star. ~ Jason Buchanan, Rovi</p>
</div>
</div>
</div>
<div id="actionBar" class="mc-action-bar">
<div class="mc-action-button" data-call-to-action-button="buy">
<i class="icon-shopping-cart"></i><span>Buy</span>
</div>
<div class="mc-action-button" data-call-to-action-button="favourites">
<i class="icon-heart"></i><span>Remove From Favourites</span>
</div>
</div>
<div class="more-like-this">
<div class="more-like-this-bar">
<h3>MORE LIKE THIS</h3>
</div>
<div class="more-like-this-scroller-container">
</div>
</div>
</div>
</body>