web-dev-qa-db-ja.com

flexbox 1つの要素の固定高さ、他の塗りつぶし

以下の説明テキストを使用して、ある種の画像ビューアーを作成したいと考えています。問題は、説明のある下のボックスの高さが固定されており、画像が含まれているコンテナの残りの高さを画像が満たす必要があることです。

私はそれが（JSを使用しない）最もエレガントでシンプルな解決策であると思うので、flexboxを使用したかったのです。ほとんど：

html,  body,  #container {
    height: 100%
}
#container {
    display: flex;
    flex-direction: column;
}
#container > #image {
/* flex-grow: 1; */ /* not needed here? */
    max-width: 75%;
    background-color: #fcc;
    margin: 0 auto;
}
img {
     max-height: 100%;
    /* HERE IS WHERE MY PROBLEM STARTS!; */
     max-width: 100%;
}
#container > #text {
    flex-grow: 0;
    flex-shrink: 0;
    background-color: rgba(128, 128, 128, 0.7);
    padding: 5px;
    max-width: 75%;
    margin: 15px auto 0;
/*  TOP MARGIN DOESN'T WORK */
}

http://codepen.io/Kageetai/pen/AaCJy

私はそれのほとんどを機能させましたが、画像はそれ自体のサイズを変更していません。テキストボックスの透明な背景を通して見ることができるように、それはそれを含んでいるdivの境界線の上に、さらにはテキストボックスの後ろにまで伸びます。では、コンテナ内に正しいアスペクト比で画像を保持するにはどうすればよいですか？

さらに、margin: 0 auto;による中央揃えは、ウィンドウのサイズを変更するときに問題を引き起こすようです。画像が中央に配置されなくなったため、ページを再度機能させるにはページを更新する必要があります。

では、画像を正しく動作させる方法を知っている人はいますか？ :)

cssimageflexbox
18
Kageetai

画像の場合、高さ、マージン、表示を設定できます。

画像コンテナの場合、フレックスに2または3の値を与え、他には与えないようにして、可能な限り多くのスペースを埋めます。

[〜＃〜] demo [〜＃〜]

使用するCSS：

html,
body,
#container {
  height: 100%
}

#container {
  display: flex;
  flex-direction: column;
}
#container > #text {
  background-color: #ccf;
  padding: 5px;
}
#container>#image {
  flex:3;
  display:flex;
}
img {
  width:auto;
  display:block;
  margin:auto;
  height:100%;
}
9
G-Cyrillus

これを実現する方法のより基本的なデモを次に示します。

<html style="height: 100%">
  <body style="height: 100%; margin: 0; display: flex; flex-direction: column">
    <p>Toolbar</p>
    <div style="background: #bbb; flex: 1">Image</div>
  </body>
</html>

Codepen でデモを見ることができます。

3
bjfletcher