Flexbox：缩小图像以适合
[英]Flexbox: shrink image to fit
问题描述
I am trying to design a page with the following properties that will be used as digital signage: 
我正在尝试设计一个具有以下属性的页面，这些属性将用作数字标牌：
- Page height is viewport height (
100vh) so that scrolling is impossible页面高度是视口高度（ 100vh），因此无法滚动 - Page is arranged into full-width rows 页面排列成全角行
- All rows but the last are static (have pre-defined content) 除最后一行外，所有行都是静态的（具有预定义的内容）
- Last row (which will contain an image slideshow) should fill the remaining space in the viewport. 最后一行（将包含图像幻灯片）应填充视口中的剩余空间。
Here 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/ https://jsfiddle.net/62qqnx3m/6/
Clearly this is not working because flex is not shrinking the image div to the right size. 显然，这是行不通的，因为flex无法将image div缩小到正确的尺寸。
I can remove the flex: 0 0 auto from the first two divs, but then they shrink instead. 我可以从前两个div中删除flex: 0 0 auto ，但是它们会收缩。
How can I force the green div/image to take up exactly what space remains, no more, no less? 我怎样才能迫使绿色的div /图像精确地占据剩余的空间，不多不少？
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. 如果图像小于可用空间，则应简单显示，而背景div仍会填充可用空间。
It seems like max-height:100% would be great for this, but that also does not work. 看来max-height:100%对此非常有用，但这也不起作用。
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. 此外，我已经看到了如何水平执行此操作的示例（我也需要这样做，但麻烦较少），但是我不知道如何将其转换为垂直缩放。
4 个解决方案
解决方案1
3 已采纳 2016-10-01 23:30:09
You can set the position of the green block to relative and the position of the image to absolute. 您可以将green块的位置设置为relative ，将图像的位置设置为绝对。 Also make sure the height of the green block is set to 100% (to take the rest of the height of the page). 还要确保将green块的高度设置为100％（以获取页面的其余高度）。
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>
解决方案2
1 2016-10-01 23:58:04
So here's what we know: 因此，这就是我们所知道的：
- The page height is
100vh页面高度为100vh - The first row is static (
height: 100px)第一行是静态的（ height: 100px） - The second row is static (
height: 150px)第二行是静态的（ height: 150px） - The third row, which contains images, should fill the remaining height 包含图像的第三行应填充剩余的高度
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>
解决方案3
0 2016-10-01 23:55:49
I just change the img class and add to class .green min-height: 100%; 我只是更改了img类，然后添加到类中。green min-height：100％; Additionally the image is responsive now with that 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>
解决方案4
0 2016-10-02 01:37:51
Try this fiddle: https://jsfiddle.net/ez4pf8wp/ 试试这个小提琴： https : //jsfiddle.net/ez4pf8wp/
Added this to the img class: 将此添加到img类：
img {
max-height: 100%;
height: 100%;
display: block;
margin: 0;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.