如何將div大小調整爲圖像顯示大小

Question

我有一個div內的圖像。 div具有固定的高度，低於圖像的內在高度。 我希望div的寬度始終等於圖像的「顯示」寬度（這是未知div的高度和圖像的高度/寬度比的函數）。

Here is a codepen example of what I want to do (having "shrink" and "other" divs the same width than their child image)

<div class="container"> 
    <div class="shrink"> 
     <img src="https://dummyimage.com/600x400/0f0/fff" /> 
    </div> 
    <div class="other"> 
    <img src="https://dummyimage.com/600x400/00f/fff" /> 
    </div> 
</div> 

div { margin: 5px; } 
img { max-height: 100%; } 
.container { 
    background-color: red; 
    display: flex; 
    flex-flow: row nowrap; 
    width: 800px; 
    height: 100px; 
    overflow: hidden; 
} 
.shrink { 
    flex: 0 1 auto; 
    background-color: #88FF88; 
} 
.other { 
    flex: 0 1 auto; 
    background-color: #8888FF; 
} 

是否有可能只用HTML/CSS即沒有使用Javascript？

在此先感謝。

Answer 1

刪除寬度作爲您的容器的屬性，div將符合其內容的寬度。

這是否適合您？