Question

这是一个常见问题，但我仍未找到解决问题的方法。

.parent是一个滑块，.child是图片。我需要将.child高度（这是绝对定位的元素）传递给.parent。

.parent身高0px。有什么想法吗？

提前致谢。

<div class="parent">
   <img class="child"></div> 
</div>

.child {
  position: absolute; //It must be absolute , because slider works with this
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

Answer 1

由于您知道图像尺寸，因此可以将高度除以宽度并获得纵横比。然后将其作为垂直填充百分比应用于父级，这将使父级响应地匹配图像尺寸。

＆＃13;

.child {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
}

.parent {
  border: 1px solid red;
  position: relative;
  padding-bottom: 39.86451277%; /* (765 / 1919) * 100 */
}

＆＃13;

<div>some content</div>

<div class="parent">
   <img class="child" src="http://via.placeholder.com/1919x765"> 
</div>

<div>more content</div>

＆＃13;

Answer 2

正如我在评论中提到的，您可以添加两个 <img>元素。一个position: absolute - 根据您的申请需要，另一个visibility: hidden但position: relative。

如果您不想搞乱标记，可以使用伪元素执行类似操作，例如:after或:before。但这个想法是一样的。

父母现在占据了你图像的整个高度。这个解决方案可能会也可能不会取决于您的应用程序，这在您的问题中不是很清楚，但也许值得一试。

.parent {
  background: #AAA;
}

.child {
  position: absolute;
}

.child-hidden {
  visibility: hidden;
}

<div class="parent">
  <img class="child" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
  <img class="child-hidden" src="http://www.extremekitcars.com/wp-content/uploads/2016/01/Sports-Cars.png">
</div>

Answer 3

如果孩子不是图像而是孩子是未知（自动）高度的div，因为它需要适应动态内容，那么有什么解决方案？

绝对定位子级和父级高度为0

3 个答案: