将div高度设置为100％将导致高度为零

Question

html

<div class="elementor-testimonial__footer">
    <div class="elementor-testimonial__image"> 
        <img src="https://roommi-tw.com/wp-content/uploads/room4.jpg">
    </div>
</div>

css

.elementor-testimonial__footer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 66.67%;
    overflow: hidden;
}
.elementor-testimonial__image {
    width: 100%;
    height: 100%; // something weird just happened
}
elementor-testimonial__image img {
    width: 100%;
}

我将.elementor-testimonial__image div的高度设置为100％，但呈现的结果为0％。

所以我删除了代码：

.elementor-testimonial__image {
    width: 100%;
    height: 100%;
}

删除这些行之后，发生了一些奇怪的事情：图像的位置发生了变化，如下图所示。

有人可以向我解释一下吗？谢谢！

#test-container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}
.elementor-testimonial__footer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 66.67%;
  overflow: hidden;
  margin-bottom: 18px;
}
.elementor-testimonial__image {
	width: 100%;
  height: 100%;
}
.elementor-testimonial__image img {
	width: 100%;
}


Edited: This is a brief code I captured from the Wordpress template but the result seems fine. I guess there are some code that has conflict but I still cannot find out... (Still working on it!)

<div id="test-container">
  <div class="elementor-testimonial__footer">
    <div class="elementor-testimonial__image">
      <img src="https://roommi-tw.com/wp-content/uploads/room4.jpg">
    </div> 
  </div>
  <div class="elementor-testimonial__content">
    
						It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal					
  </div>
</div>

Answer 1

如前所述，div .elementor-testimonial__image的100％高度无效（0px的100％）。但是图像是可见的，因为它会使用图片的高度溢出其父容器。

另外：

• 将缺少的点（“。”）添加到类选择器elementor-testimonial__image img（如果要使用它）
• 在CSS中始终使用/* .... */样式的注释。仅仅因为//在大多数浏览器中都能工作并不意味着它是正确的。