web-dev-qa-db-fra.com

flexbox un élément hauteur fixe, autre remplissage

Je veux créer une sorte de visionneuse d'images avec du texte descriptif ci-dessous. Le problème est que la boîte inférieure avec la description a une hauteur fixe et que l'image doit remplir la hauteur restante du conteneur dans lequel elle se trouve.

Je voulais utiliser flexbox pour cela, car je pense que cela semble être la solution la plus élégante et la plus simple (sans utiliser JS). Ce code et ce codepen pour mon travail actuel, qui semble fonctionner la plupart:

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

J'ai réussi à l'essentiel, mais l'image ne se redimensionne pas correctement. Comme vous pouvez le voir à travers l'arrière-plan transparent de la zone de texte, il s'étire au-dessus de la bordure du div contenant et même derrière la zone de texte. Alors, comment puis-je conserver l'image avec le rapport d'aspect correct à l'intérieur de son conteneur?

Et en plus le centrage avec margin: 0 auto; semble poser problème lors du redimensionnement de la fenêtre. L'image n'est plus centrée et la page a besoin d'un rafraîchissement pour la faire fonctionner à nouveau.

Est-ce que quelqu'un sait comment faire pour que l'image se comporte correctement? :)

cssimageflexbox
18
Kageetai

Pour l'image, vous pouvez définir une hauteur, une marge et un affichage.

Pour le conteneur d'images, donnez une valeur 2 ou 3 à flex et aucune à autre, afin qu'il remplisse autant d'espace que possible.

DÉMO

CSS utilisé:

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

Voici une démonstration plus basique de la façon d'y parvenir.

<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>

Une démo peut être vue sur Codepen .

3
bjfletcher