All geek questions in one place

Flexbox: image compression to match

I am trying to create a page with the following properties that will be used as digital signage:

  • Page height - viewport height ( 100vh ), so scrolling is not possible.
  • Page arranged in full-width rows
  • All lines except the last are static (have predefined content)
  • The last line (which will contain the image slide show) should fill the remaining space in the viewport.

Here is what I still have:

 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/

Obviously, this does not work because flex does not reduce the size of the image to the desired size.

I can remove flex: 0 0 auto from the first two divs, but instead they are shortened.

How can I make the green div / image occupy exactly what remains, no more, no less?

Therefore, if a higher image were set, it would be reduced even more to fit.

And if the image is smaller than the available space, it should just be displayed, and the background div is still filling the available space.

It seems that max-height:100% for this would be great, but that also doesn't work.

In addition, I saw examples of how to do this horizontally (which I also need, but I have less problems), but I can’t figure out how to translate this into vertical scaling.

+5
source share
4 answers

You can set the position of the green block to relative , and the position of the image to absolute. Also make sure the green block height is set to 100% (to take the rest of the page).

This should fix the problem:

 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
source

So here is what we know:

  • Page Height 100vh
  • The first line is static ( height: 100px )
  • The second line is static ( height: 150px )
  • The third row containing the images should fill in the remaining height

I think the solution lies in basic math:

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

Instead, in your code:

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

Try the following:

 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>

fixed violin

+1
source

I just change the img class and add to the .green class min-height: 100%; In addition, the image now responds to this code.

 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
source

Try this script: https://jsfiddle.net/ez4pf8wp/

Added this to the img class:

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

Source: https://habr.com/ru/post/1257595/

More articles:


All Articles