Question

我对如何让孩子跟随其父母的尺寸有疑问。下面的情况。

HTML

{
address: "1"
created_at: null
email: "1@mail.com"
facebook_id: "1"
full_name: "1"
home_phone: 1
id: null
identity_id: "1111111"
instagram_id: "1"
line_id: "1"
mobile_phone: 1
password: "11111111111"
photo:'test.jpg'
status: "1"
updated_at: null
userable_id: null
userable_type: "organizer"
website_link: "1"
}

CSS

<div class="video">

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

</div>

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

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

Answer 1

您已设置max-width而不是width。 max-width不会将width设置为给定值，只会阻止width超过给定值。

.spot {
  position: absolute;
  height: 30px;
  top: 0;
  left: 0;
  display: table;
  margin: 0;
  width: 100%;
}

Answer 2

您的图片已经跟随您的.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>

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

2 个答案: