Flexbox: сжать изображение, чтобы соответствовать

Я пытаюсь создать страницу со следующими свойствами, которые будут использоваться в качестве цифровых вывесок:

  • высота страницы-это высота окна просмотра (100vh) Так что прокрутка невозможно
  • страница организована в полную ширину строки
  • все строки, кроме последних, являются статическими (имеют предварительно определенное содержимое)
  • последняя строка (которая будет содержать слайд-шоу изображений) должна заполнить оставшееся пространство в окне просмотра.

вот что я до сих пор: 

body {
  margin: 0;
}
div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}
div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}
div.green {
  background-color: green;
  flex: 0 1 auto;
}
img {
  max-height: 100%;
}
<div id="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green">
    <img src="http://lorempixel.com/200/300/">
  </div>
</div>

https://jsfiddle.net/62qqnx3m/6/

очевидно, что это не работает, потому что flex не сжимает изображение div до нужного размера.

удалить flex: 0 0 auto от первых двух дивов, но вместо этого они сжимаются.

как я могу заставить зеленый div / image занять именно то пространство, которое осталось, не больше, не меньше?

так если более высокое изображение было поставляемый, он будет сжиматься еще больше, чтобы соответствовать.

и если образ меньше чем доступное пространство, оно должно просто отображаться, при этом фон div все еще заполняет доступное пространство.

кажется max-height:100% было бы здорово, но это также не работает.

кроме того, я видел примеры того, как это сделать горизонтально (что мне тоже нужно, но у меня меньше проблем), но я не могу понять, как перевести это в вертикальное масштабирование.

6
css css3 flexbox html

4 ответов

вы можете установить позицию green блок relative и положение изображения к абсолюту. Также убедитесь, что высота green блок установлен на 100% (чтобы взять остальную часть высоты страницы).

Это должно решить проблему:

body {
  margin: 0;
}

div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}

div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}

div.green {
  background-color: green;
  flex: 0 1 auto;
  position: relative;
  height: 100%;
}

img
{
  max-height: 100%;
  position: absolute;
}
<body>
  <div id="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"><img src="http://lorempixel.com/200/300/"></div>
  </div>
</body>
3

Итак, вот что мы знаем:

  • высота страницы 100vh
  • первая строка является статическим (height: 100px)
  • вторая строка статична (height: 150px)
  • третья строка, содержащая изображения, должна заполнить оставшуюся высоту

Я думаю, что решение лежит в базовой математике:

100vh - 100px - 150px = height of third row

вместо этого в коде:

div.green {
    background-color: green;
    flex: 0 1 auto;
}

img {
    max-height: 100%;
}

попробовать это:

div.green {
    background-color: green;
    flex: 1 1 auto;
}

img {
    height: calc(100vh - 250px);
}


body {
  margin: 0;
}
div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}
div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}
/* 
div.green {
  background-color: green;
  flex: 0 1 auto;
}
img
{
  max-height: 100%;
}
*/

div.green {
  background-color: green;
  flex: 1 1 auto;
}
img {
  height: calc(100vh - 250px);
}
<div id="container">
  <div class="red"></div>
  <div class="blue"></div>
  <div class="green">
    <img src="http://lorempixel.com/200/300/">
  </div>
</div>

пересмотрен скрипка

1

Я просто меняю класс img и добавляю в класс .зеленая минимальная высота: 100%; Кроме того, изображение теперь реагирует на этот код. 

body {
  margin: 0;
   
}

div#container {
  display: flex;
  flex-direction: column;
  height: 100vh;  
}

div.red {
  height: 100px;
  background-color: red;
  flex: 0 0 auto;
}

div.blue {
  height: 150px;
  background-color: blue;
  flex: 0 0 auto;
}

div.green {
  background-color: green;
  flex: 0 1 auto;
   min-height: 100%;
}

.green img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
<body>
  <div id="container">
    <div class="red"></div>
    <div class="blue"></div>
    <div class="green"><img src="http://lorempixel.com/200/300/"></div>
  </div>
</body>
0

попробуйте эту скрипку: https://jsfiddle.net/ez4pf8wp/

добавил Это в класс img:

img {
   max-height: 100%;
   height: 100%;
   display: block;
   margin: 0;
}
0