CSS高度自动没有高度

Question

在响应式视频播放器中，没有高度自动元素，也没有正常工作。首先，封面图片应该覆盖整个播放器，控制栏应该向下。喜欢这里:

没有 height of 所以我不能把 height: 100% 因为一切都变了。如果我将高度 100% 放在封面图片上，它就会消失。控制栏固定在顶部，无法移动。我已经这样工作了很多年，从来没有遇到过这样的问题。

这是我的代码: JSFiddle

HTML

<section class="player">
    <video class="video">
        <source src="http://ridens.net/templates/default/player/videos/Ridens_promo_video_finish_mp4.ogv" type="video/ogg">
    </video>
    <div class="video_cover">
        <img src="http://ridens.net/templates/default/player/videos/promovideothumbnail.png">
    </div>
    <div class="controls">
        <div class="controls_bar">

        </div>
    </div>
</section>

CSS:

.player {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
}
.video {
    width: 100%;
    display: block;
    position: absolute;
    z-index: 20;
    top: 0;
    left: 0;
}
.video_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 40;
}
.video_cover img {
    width: 100%;
    height: 100%;
}
.controls {
    position: absolute;
    z-index: 60;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.controls_bar {
    position: relative;
    z-index: 70;
    left: 5%;
    bottom: 0;
    background: #000;
    height: 100%;
    width: 100%;
}

Answer 1

jsBin demo with play functionality

不要使用 <img>标签，而是使用响应 cover .video_cover 的背景图片

<div class="video_cover"></div> <!-- Tada! no image! -->

所有你需要的:(又名:Total CSS remake):

.player { position: relative; }
.video { width: 100%; }
.video_cover {
  position: absolute;
  left:0;
  top:0;
  width: 100%;
  height: 100%;
  background: url(coverimage.png) 50% / cover;
}
.controls {
  position: absolute;
  width: 100%;
  bottom: 0;
  background: #000;
  height: 40px;
  color: #fff;
}

如果你需要它，这里是完整的 HTML:

<section class="player">

  <video class="video">
    <source src="promo.ogv" type="video/ogg">
  </video>

  <div class="video_cover"></div>

  <div class="controls">
    <div class="controls_bar">
      <span id="play"></span>
    </div>
  </div>

</section>  

和 jQuery:

var $pla = $('.player');
var $vid = $('.video');
var $cov = $('.video_cover');
var $con = $('.controls');

$con.hide();

$pla.hover(function(){
  $con.stop().slideToggle(250);
});

$('#play').html("►").click(function(){
  var pp = this.pp ^= 1;
  $(this).html(pp?"▐▐":"►");
  $cov.fadeToggle(700, function(){
    $vid[0][pp?"play":"pause"]();
  });
});