Spraw, aby obraz zajmował całą wysokość elementu flex

Question

Mam kontener o wartości 100vh (bez stałej wysokości nav).

<section class="container"> 

Wewnątrz tego pojemnika mam jakiś tekst:

<div class="text"> 
    <p>title</p> 
</div> 

które mogą być dowolnej długości, jak zawartość jest dynamiczna.

Poniżej tego tekstu mam obraz:

<div class="image"> 
    <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
</div> 

Obraz musi wypełnić resztę 100vh (- wysokość NAV) pojemnik.

używam:

.container{ 
    display:flex; 
    flex-flow: column nowrap; 
    .... 

Fiddle

Problem mam jest to, że muszę być obraz do wysokości pozostałej części przestrzeni.

Jak mogę to zrobić? W moim skrzypcach, jeśli twój ekran jest mały, jest odcięty i jeśli twój ekran jest duży, nie wypełnia miejsca. Wysokość: 100% nie działa, co czyni go zbyt dużym.

Rozwiązania Flex tylko proszę, żadnych sztuczek stołowych - dzięki!

Answer 1

Utwórz pojemnik z obrazem (.image) elastyczny pojemnik z height: 100%.

Następnie można dostroić współczynnik kształtu obrazu i jego wyrównanie do wartości object-fit/object-position.

nav { 
 
    position:fixed; 
 
    background:grey; 
 
    width:100%; 
 
    height: 100px; 
 
} 
 

 
main { 
 
    padding-top: 100px; 
 
} 
 

 
.container { 
 
    display:flex; 
 
    flex-flow: column nowrap; 
 
    height: calc(100vh - 100px); 
 
    background: green; 
 
    border: 3px solid brown; 
 
} 
 

 
.text { background: yellow; } 
 

 

 
/* ***** NEW ***** */ 
 
.image { 
 
    display: flex; 
 
    justify-content: center; 
 
    height: 100%; 
 
} 
 
img { 
 
    width: 100%; 
 
    object-fit: contain; 
 
}

<nav>Nav</nav> 
 
<main> 
 
    <section class="container"> 
 
     <div class="text"><p>title</p></div> 
 
     <div class="image"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="text"><p>hello</p></div> 
 
     <div class="image"> 
 
      <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> 
 
     </div> 
 
    </section> 
 
</main>

Revised Fiddle

pamiętać, że hotel object-fit nie jest obsługiwane przez IE. Aby uzyskać więcej informacji i obejść, zobacz: https://stackoverflow.com/a/37127590/3597276

Answer 2

Może nie dokładnie to, co chciałeś, ale jeśli przeniesiesz obraz do elementu div i użyjesz go jako tła, możesz uzyskać pożądany efekt.

Fiddle

HTML: Nav

tytuł

<section class="container"> 
    <div class="text"> 
    <p>hello</p> 
    </div> 
    <div class="imageWrap"> 
    <div class="image"></div> 
    </div> 
</section> 
</main> 

CSS:

nav { 
    background: grey; 
    width: 100%; 
    height: 100px; 
    position: fixed; 
} 
main{ 
    padding-top: 100px; 
} 
.container{ 
    display: flex; 
    flex-flow: column nowrap; 
    height: calc(100vh - 100px); 
    background: green; 
    border: 3px solid brown; 
} 
.imageWrap { 
    flex: 1; 
    display: flex; 
} 
.image { 
    flex: 1; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url(https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg) 
} 
.text{ 
    background: yellow; 
}