html - 如何在绝对位置父级上设置子级高度

Question

我对如何让 child 的大小跟随其 parent 有疑问。以下案例。

HTML

<div class="video">

  <div class="spot">
    <img src="..." alt="">
    <button>x</button>
  </div>

</div>

CSS

.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  position: absolute;
  max-height: 30px;
  top: 0;
  left: 0;
  display: table;
  margin: 0;
  max-width: 100%;
  /* width: 16%;  only height can affect image on content*/
}

.spot img {
  width: 100%;
  height: 100%;
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}

我想做的是让图像跟随光斑高度。因为如果我设置宽度(无论大小)，图像将遵循点宽度。有人知道怎么做吗？

我还创建了 jsfiddle https://jsfiddle.net/isatrio/yosfep6r/14/ .

Answer 1

您的图像已经在您的 .spot 高度之后。检查 spot 上的边框。或者你的意思是溢出？或者您想让您的 .spot 跟随您的 .video 吗？

console.log(".spot height: " + $(".spot").innerHeight());
console.log("img height: " + $(".spot img").height());

.video {
  width: 600px;
  height: 500px;
  background: #000;
  position: relative;
}

.spot {
  border: red 2px solid;
  position: absolute;
  height: 40%;
  /*width: 20%;*/
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  max-width: 100%;
  overflow: hidden;
}

.spot img {
  /*width: 150%;*/
  height: 100%;  
}

.spot button {
  position: absolute;
  top: 0;
  left: 100%;
  margin-left: -24px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video">

  <div class="spot">
    <img src="https://creativeblossoming.files.wordpress.com/2013/10/navy-living-room.jpg" alt="">
    <button>x</button>
  </div>

</div>