如何調整div高度以匹配沒有固定父級高度的同級img高度

我試圖製作一個可調整的引導程序列表組，該列表組調整爲同級圖像的大小。父容器沒有固定的高度，我不能使用jQuery。有什麼想法嗎？如何調整div高度以匹配沒有固定父級高度的同級img高度

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%; 
}

來源

2017-08-12 lgants

您可以指定類名嗎？哪個父母應該等於哪個圖像？ – godblessstrawberry

@godblessstrawberry我可以指定類名。同樣，可滾動列表組的高度應該與相鄰圖像的高度相同（即，大小取決於圖像，父母只是一個包裝）。 – lgants

我的意思是你可以告訴我類名 - 應該與圖像相等的確切父類是什麼？我沒有得到你想要達到的目標。你也需要jQuery作爲它的引導依賴 - 「所有的JavaScript插件都需要包含jQuery」（c）http://getbootstrap.com/docs/3.3/getting-started/#download – godblessstrawberry

有涉及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組以啓用此設置中的滾動

來源

2017-08-12 20:21:39 WiseOlMan

這是一個非常酷的方法。不幸的是，圖像會被裁剪掉（即，當窗口被調整大小時，圖像沒有被調整爲具有一致的寬高比） – lgants

有人糾正我錯了，但我不認爲你可以不使用JS。 – WiseOlMan

我能想到的唯一的事情就是保持所有圖像完全相同的比例，並更新兩個兄弟容器中每一個的寬度以匹配。 – WiseOlMan

如何調整div高度以匹配沒有固定父級高度的同級img高度

回答

相關問題