Làm cho hình ảnh có chiều cao đầy đủ của mặt hàng flex

Question

Tôi có một thùng chứa 100vh (trừ chiều cao cố định).

<section class="container"> 

Bên trong thùng chứa này tôi có một số văn bản:

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

Mà có thể được của bất kỳ chiều dài như nội dung là năng động.

Dưới văn bản này, tôi có một hình ảnh:

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

Các hình ảnh cần phải điền vào phần còn lại của 100vh (- Chiều cao nav) chứa.

tôi sử dụng:

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

Fiddle

Vấn đề tôi đang gặp là tôi cần hình ảnh có chiều cao của phần còn lại của vũ trụ.

Làm thế nào tôi có thể làm điều này? Trong fiddle của tôi, nếu màn hình của bạn là nhỏ nó đang được cắt bỏ và nếu màn hình của bạn là lớn nó không lấp đầy không gian. Chiều cao: 100% không hoạt động, làm cho nó quá lớn.

Chỉ giải pháp Flex, không có thủ thuật bảng - cảm ơn!

Answer 1

Đặt vùng chứa hình ảnh (.image) một hộp chứa hình chữ nhật với height: 100%.

Sau đó, bạn có thể tinh chỉnh tỷ lệ co của hình ảnh và căn chỉnh với 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

Lưu ý rằng object-fit bất động sản không được hỗ trợ bởi trình duyệt IE. Để biết thêm chi tiết và giải pháp thay thế, hãy xem: https://stackoverflow.com/a/37127590/3597276

Answer 2

Có thể không chính xác những gì bạn muốn, nhưng nếu bạn di chuyển hình ảnh đến một div và sử dụng nó làm nền, bạn có thể có được hiệu ứng mong muốn.

Fiddle

HTML: Nav

tiêu đề

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

CSS:

01.

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