CSS高度自动没有高度

Question

在自适应视频播放器中，没有高度自动元素的高度，并且不能正常工作。 首先，封面图像应该是整个播放器，控制条应该是关闭的。像这里：

没有高度，所以我不能把高度：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! -->

您需要的所有内容 :(又名：重置CSS重拍）：

.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"]();
  });
});