Resim yapma esnek öğenin tam yüksekliğini al

Question

100vh (eksi sabit hız yüksekliği) olan bir kapsayıcım var.

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

içeriği dinamik olarak herhangi bir uzunlukta olabilir: Bu kapsayıcı içinde

<section class="container"> 

Bazı metin var. (- nav yükseklik) kabı

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

görüntü 100vh geri kalanını doldurmak gerekir: Bu metnin altında

ben bir görüntü var.

kullandığım: Ben uzayda kalan yüksekliği olması görüntüyü gerektiğini

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

Fiddle

ben yaşıyorum sorundur.

Bunu nasıl yapabilirim? Kemanımda ekranınız küçükse kesiliyor ve ekranınız büyükse alanı doldurmuyor. Yükseklik:% 100 çalışmaz, çok büyük.

Yalnızca esnek çözümler, lütfen masa numaralarını kullanmayın - teşekkürler!

Answer 1

Görüntü kapağını (.image) height: 100% ile esnek bir kapsayıcı yapın.

Görüntüyü en boy oranına ve hizalamaya object-fit/object-position ile ince ayar yapabilirsiniz. object-fit özelliği IE tarafından desteklenmediğini

Revised Fiddle

Not

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>

. Daha fazla bilgi ve bir geçici çözüm için bkz .: https://stackoverflow.com/a/37127590/3597276

Answer 2

Belki de tam olarak istediğin şey değil, ancak görüntüyü bir div öğesine taşır ve arka plan olarak kullanırsanız, istediğiniz efekti elde edebilirsiniz.

Fiddle

HTML: Nav

başlık

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