画像を自動サイズのフレックスチャイルドに合わせる

Question

私は過去2日間は無駄に解決しようとしてきた非常に特殊な問題を抱えています。私は建物だページには、以下の構造を有する：

を私は簡単に私はしかし、全体的な親がdisplay: flex; flex-direction: column; align-items: stretchを有し、Aはflex: 1 1 0; min-height: 100px;

するflex: 0 0 autoとBであることを設定するとABのレイアウトを実現することができますBの中のCとDのレイアウトが本当に面倒です。フレックス/ローが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に設定されていれば多くのスペースが残っています。

私がここに必要なものをどのように達成することができますか？

UPDATE：私はここで一緒に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）を設定するとこれを修正できると思っていましたが、実際には画像の垂直方向のスケーリングが壊れ、水平方向にのみスケーリングされるようになりました。これは完全に予期しない動作でした！しかしそれ以外は、これは私のニーズを満たしています。