製作圖像格佔用​​100％的高度以關閉父DIV的

Question

我努力工作了這一點，並希望有人能提供一些建議：

• 我有沒有指定高度父DIV以便它可以由其內容決定。
• 然後我在這個父div裏面有兩個'child'元素，但是我只有 想要其中的一個來確定父div的高度。
• 其他子div包含一個圖像，這個圖像應該取 其容器的100％（其高度應該基於父div的高度 ） - 這是通過指定高度值爲：繼承。

圖片說明：

我有一切按計劃工作，但一旦我添加圖像，它要麼不填滿其容器的整個高度或它會造成圖像溢出這改變了父div的高度（我不想發生）。

這是被添加圖像之前的代碼：

.parentDiv { 
 
    width: 100%; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.imageDiv { 
 
    width: 50%; 
 
    height: inherit; 
 
    background-color: orange; 
 
} 
 
.contentDiv { 
 
    width: 50%; 
 
    background-color: lightgreen; 
 
} 
 
.contentDiv p { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
}

<div class="parentDiv"> 
 

 
    <div class="imageDiv"></div> 
 

 
    <div class="contentDiv"> 
 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
    </div> 
 

 
</div>

這是圖像被添加後：

.parentDiv { 
 
    width: 100%; 
 
    background-color: grey; 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
} 
 
.imageDiv { 
 
    width: 50%; 
 
    height: inherit; 
 
    background-color: orange; 
 
} 
 
.imageContainer { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.imageContainer img { 
 
    width: 100%; 
 
    height: 100%; 
 
    
 
    object-fit: cover; 
 
} 
 

 
.contentDiv { 
 
    width: 50%; 
 
    background-color: lightgreen; 
 
} 
 
.contentDiv p { 
 
    padding-left: 15px; 
 
    padding-right: 15px; 
 
}

<div class="parentDiv"> 
 

 
    <div class="imageDiv"> 
 
    
 
    <div class="imageContainer"> 
 
     <img src="http://www.unoosa.org/res/timeline/index_html/space-2.jpg"> 
 
    </div> 
 
    
 
    </div> 
 

 
    <div class="contentDiv"> 
 
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
 
    </div> 
 

 
</div>

我要知道一個方法可以將圖像設置爲背景圖像，但我不想這樣做，並想知道是否可以按照我上面嘗試的方式完成。

希望有人能幫助！

Answer 1

試試這個，

.parentDiv { 
    width: 100%; 
    height:300px; 
    background-color: grey; 
} 
.imageDiv { 
    width: 50%; 
    height: inherit; 
    background-color: orange; 
    float:left; 

} 
.imageContainer { 
    width: 100%; 
    height: 100%; 
} 

.imageContainer img { 
    width: 100%; 
    min-height: 100%; 
    } 

.contentDiv { 
    width: 50%; 
    height:100%; 
    float:left; 
    background-color: lightgreen; 
} 
.contentDiv p { 
    padding-left: 15px; 
    padding-right: 15px; 
}