Menu
I am trying to design a page with the following properties that will be used as digital signage:
100vh) so that scrolling is impossibleHere is what I have so far:
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/
Clearly this is not working because flex is not shrinking the image div to the right size.
I can remove the flex: 0 0 auto from the first two divs, but then they shrink instead.
How can I force the green div/image to take up exactly what space remains, no more, no less?
So if a taller image was supplied, it would shrink even more to fit.
And if an image is smaller than the available space, it should simply display, with the background div still filling the available space.
It seems like max-height:100% would be great for this, but that also does not work.
Furthermore, I have seen examples of how to do this horizontally (which I also need, but am having less trouble with), but I can't figure out how to translate that into vertical scaling.
719
You can easily shrink an image by using the flex-wrap property in CSS and it specifies whether flex items are forced into a single line or wrapped onto multiple lines. The flex-wrap property allows enabling the control direction in which lines are stacked.
The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink .
CSS flexbox has the potential to wrap, align, and justify items in a container. This makes it handy for creating a responsive layout in a grid-like structure. In this tutorial, we used flexbox to create three responsive image gallery projects that look amazing on all devices.
To auto-resize an image or a video to fit in a div container use object-fit property. It is used to specify how an image or video fits in the container. object-fit property: This property is used to specify how an image or video resize and fit the container.
You can set the position of the green block to relative and the position of the image to absolute.
Also make sure the height of the green block is set to 100% (to take the rest of the height 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>So here's what we know:
100vh
height: 100px)height: 150px)I think the solution lies in basic math:
100vh - 100px - 150px = height of third row
Instead of this in your code:
div.green {
background-color: green;
flex: 0 1 auto;
}
img {
max-height: 100%;
}
Try this:
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>revised fiddle
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
