如何调整div高度以匹配没有固定父级高度的同级img高度

Question

我试图制作一个可调整的引导程序列表组，该列表组调整为同级图像的大小。父容器没有固定的高度，我不能使用jQuery。有什么想法吗？

https://jsfiddle.net/lgants/oL0rgsqk/3/

HTML：

<div class="row carousel-container"> 
    <div class="carousel-image-container"> 
     <img class="carousel-image img-responsive" src="https://lorempixel.com/900/500?r=4"> 
    </div> 
    <div class="carousel-list-container"> 
     <div class="list-group"> 
     <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> 
      <div class="d-flex w-100 justify-content-between"> 
      <h5 class="mb-1">List group item heading</h5> 
      <small>3 days ago</small> 
      </div> 
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
      <small>Donec id elit non mi porta.</small> 
     </a> 
     <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> 
      <div class="d-flex w-100 justify-content-between"> 
      <h5 class="mb-1">List group item heading</h5> 
      <small class="text-muted">3 days ago</small> 
      </div> 
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
      <small class="text-muted">Donec id elit non mi porta.</small> 
     </a> 
     <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> 
      <div class="d-flex w-100 justify-content-between"> 
      <h5 class="mb-1">List group item heading</h5> 
      <small class="text-muted">3 days ago</small> 
      </div> 
      <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> 
      <small class="text-muted">Donec id elit non mi porta.</small> 
     </a> 
     </div> 
    </div> 

CSS：

.carousel { 
    max-height: 500px; 
    position: relative; 
    display: inline-block; 
    height: 100%; 
} 

.carousel-image-container { 
    width: 60%; 
} 

.carousel-image { 
    max-width:100%; 
    max-height:100%; 
    object-fit: contain; 
} 

.carousel-list-container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    overflow-y: hidden; 
    width: 40%; 
} 

Answer 1

有涉及CSS百分比填充一个很酷的技巧，因为......

的大小填充百分比，re与容纳块的宽度相同。必须是非负的。

MDN spec

你可以用你的优势，以创造真正响应的网页布局。

这里的工作[的jsfiddle（https://jsfiddle.net/oL0rgsqk/4/）

这是我使用的CSS：

.carousel-container { 
    position: relative; 
    display: inline-block; 
    width: 100%; 
    font-size: 0; 
} 

.carousel-image-container { 
    width: 60%; 
    padding-top: 60%; 
    position: relative; 
    display: inline-block; 
} 

.carousel-image { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
} 

.carousel-list-container { 
    width: 40%; 
    padding-top: 60%; 
    position: relative; 
    display: inline-block; 
    font-size: 14px; 
} 

.carousel-list-container-scroll { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

以及添加在你.list-额外.carousel列表容器滚动DIV组以启用此设置中的滚动