如何使css彈性框行自動調整圖像水平

Question

當在div上設置flex-basis：auto時，div垂直展開以適應內容。

Example

HTML：

<div class="parent"> 
    <div class="image"> 
    <img src="http://placebacon.net/400/103"> 
    </div> 
    <div class="text"> 
    -- Removed for readability -- 
    </div> 
</div> 

SCSS：

.parent { 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    display:flex; 
    flex-direction:column; 

    .image { 
    flex-basis:auto; 
    flex-grow:0; 
    flex-shrink:0; 

    img { 
     width:100%; 
     height:auto; 
    } 
    } 

    .text { 
    flex-basis:0px; 
    flex-grow:1; 
    flex-shrink:1; 

    overflow-y:scroll; 
    } 
} 

然而，這並不工作水平：

Example 2

.parent { 
    position:absolute; 
    top:0px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    display:flex; 
    flex-direction:row; 

    .image { 
    flex-basis:auto; 
    flex-grow:0; 
    flex-shrink:0; 

    img { 
     height:100%; 
     width:auto; 
    } 
    } 

    .text { 
    flex-basis:0px; 
    flex-grow:1; 
    flex-shrink:1; 

    overflow-y:scroll; 
    } 
} 

如果您調整父級的高度，圖像將更改大小以保留寬高比。但是，彈出框會保留轉換前圖像的大小。

是否有我需要設置的CSS屬性來獲得預期的行爲？

Answer 1

好像你需要設置一個高度.parent，.image終於img觸發每個元素的計算：https://jsfiddle.net/knjesznx/4/

你應該不介意flex值，除非你真的有litlle內容和背景顯示，那麼只需將flex：1添加到容器中，以便填充剩下的所有空間demo

.parent { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    height: 100vh;/* here */ 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
.parent .image { 
 
    height: 100%;/* here */ 
 
} 
 
.parent .image img { 
 
    height: 100%;/* here */ 
 
    width: auto; 
 
} 
 
.parent .text { 
 
    overflow-y: scroll; 
 
/* eventually use flex:1; to fill all space left*/ 
 
}

<div class="parent"> 
 
    <div class="image"> 
 
    <img src="http://placebacon.net/103/400"> 
 
    </div> 
 
    <div class="text"> 
 
    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. 
 
    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. 
 
    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. 
 
    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. 
 
    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. 
 
    </div> 
 
</div>

Answer 2

我會刪除並設置圖像作爲圖像容器的背景。 CSS的看起來像：

.image { 
 
    flex-basis:auto; 
 
    flex-grow:0; 
 
    flex-shrink:0; 
 
    height: 100%; 
 
    width: 150px; 
 
    background-image: url('http://placebacon.net/103/400'); 
 
    background-size: cover; 
 
    }