將圖像調整爲自動調整大小的柔性孩子

Question

我有一個非常奇怪的問題，我一直試圖解決過去兩天無濟於事。頁面我的建築結構如下：

我可以輕鬆實現AB佈局具有display: flex; flex-direction: column; align-items: stretch和設置是flex: 0 0 auto和B的整體父是flex: 1 1 0; min-height: 100px;

不過我在B內部佈局C和D的時候真的很麻煩。我覺得flex/row是B的正確方法，但我無法得到具體細節。所以我想：

.B { 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between; 
} 

.C { 
    flex: 1 1 0; 
} 

.D { 
    object-fit: scale-down; 
} 

但顯然這是不夠的。如果我將它設置爲也有最小寬度的flex: 1 1 0，圖像或者根本不縮小，縮小但扭曲或者留下大量空間。

任何想法如何我可以實現我所需要的？

更新：我試圖把這裏的jsfiddle一起 - https://jsfiddle.net/2gsrzwwq/3/ - 但由於某些原因，它甚至不會對母孝敬height:100%。就圖像擬合而言，我需要將圖像縮小到D div的高度，然後讓D塊的寬度減小以包含縮小的圖像 - 並且C塊佔用剩餘寬度。

Answer 1

經過更多的鬥爭和另一個不眠之夜，我想出了一些工作。我必須做的犧牲不是調整圖像容器的寬度，而是總是以屏幕寬度的一半來解決（請注意，在真實應用程序中，沒有背景顏色，所以它看起來並不奇怪，相反會有一些額外的空白空間）。我將不得不與客戶討論這個問題，但我想我可以說服他們。以下是我想出了：

https://jsfiddle.net/2gsrzwwq/6/

HTML：

<div class="page"> 
    <div class="A"> 
    </div> 

    <div class="B"> 
    <div class="C"> 
    </div> 
    <div class="D"> 
     <img src="http://res.freestockphotos.biz/pictures/10/10677-illustration-of-a-red-lobster-pv.png"/> 
    </div> 
    </div> 
</div> 

CSS：

div { 
    box-sizing: border-box; 
} 

.page { 
    width: 100%; 
    height: 250px; 
    border: solid 1px black; 
    margin: 5px; 
    background-color: lightYellow; 
    display: flex; 
    flex-direction: column; 
    align-items: stretch; 
    justify-content: flex-start; 
} 

.A { 
    background-color: lightPink; 
    margin: 5px; 
    flex: 0 0 50px; 
} 

.B { 
    background-color: lightBlue; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 80px; 
    display: flex; 
    flex-direction: row; 
    align-items: stretch; 
    justify-content: space-between 
} 

.C { 
    background-color: lightGreen; 
    margin: 5px; 
    flex: 1 1 0; 
    min-width: 100px; 
} 

.D { 
    background-color: lightGrey; 
    margin: 5px; 
    flex: 1 1 0; 
    min-height: 50px; 
    display: flex; 
    justify-content: flex-end; 
} 

.D img { 
    flex: 1 1 0; 
    max-height: 100%; 
    max-width: 200px; 
    object-fit: scale-down; 
    object-position: top right; 
} 

Answer 2

我一模一樣的問題所困擾自己：

Maximum possible size image and div expanding to fill the space

我想出了以下解決方案，我也提供了作爲我自己問題的答案。 見 https://jsfiddle.net/wwhyte/vjLps7qs/;用http://placekitten.com/1600/900替換圖像以查看橫向行爲。

CSS：

.container { 
    width: calc(100vw); 
    height: 100vh; 
    overflow: hidden; 
    } 

    .top { 
    height: 1.25em; 
    background: yellow; 
    } 

    .innerCtr { 
    height: 100%; 
    overflow: hidden; 
    } 

    .left { 
    height: 100%; 
    background: red; 
    overflow: hidden; 
    } 

    .right { 
    max-height: 100%; 
    max-width: 80%; 
    background: blue; 
    float: right; 
    object-fit: contain; 
    overflow: hidden; 
    position: relative; 
    top: 50%; 
    transform: translateY(-52%) scale(0.95); 
    } 

HTML：

<div class="container"> 
    <div class="top"> 
    </div> 
    <div class="innerCtr"> 
    <img class="right" src="http://placekitten.com/1600/900"> 
    <div class="left">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> 
</div> 

我認爲正在發生的事情是：

• 在右類：
  • max-height，max-width和object-fit爲我提供了所需的縮放比例。
  • float：right給出我需要的位置。 （我從昨天發現的一篇文章中瞭解到這一點，但現在已經丟失了，如果我重新找到它，我將編輯此答案以提供歸屬）。
  • 該變換的靈感來源於垂直對齊的文章：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/。
  • 95％的比例提高了圖像的可見性。
• 在左側類，高度：100％給予面板尺寸我想
• 的innerCtr類爲父母的圖像，計算針對
• 容器類高度適合視瀏覽器窗口。

即使這樣也不太理想。頂部欄的高度和圖像的高度之間存在一些奇怪的相互作用，因此圖像的底部被推出顯示屏。推出的數量少於頂部酒吧的高度 - 我還沒有完全調查過。如果你刪除頂部欄，上面的CSS表現完美。我用95％的比例和對Y變換的輕微調整來解決這個問題，但是在小窗口尺寸下，這仍然不能完全正確 - 圖像不是完美垂直居中。我以爲在容器類上設置height = calc（100vh-1.25em）可能會解決這個問題，但實際上它會中斷圖像的垂直縮放，所以它現在只能水平縮放。這是完全意外的行爲！但除此之外，這符合我的需求。