Flexbox：缩小图像以适合 [英] Flexbox: shrink image to fit
问题描述
我正在尝试设计一个具有以下属性的页面，这些属性将用作数字标牌：
- 页面高度是视口高度（
100vh），这样就不可能滚动 - 页面被安排为全角行
- 除了最后一行以外，所有行都是静态的（具有预定义的内容）
- 最后一行（将包含图像幻灯片）应填充视口中的剩余空间。
这是我到目前为止的内容：
body {margin：0;} div＃container {display：flex; flex-direction：列; height：100vh;} div.red {height：100px;背景颜色：红色； flex：0 0 auto;} div.blue {高度：150px;背景颜色：蓝色； flex：0 0 auto;} div.green {background-color：green; flex：0 1自动;} img {最大高度：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缩小到正确的大小。
我可以从前两个div中删除 flex：0 0自动，但随后它们会缩小。
我该如何强制绿色的div /图像准确地占据剩余的空间，不多不少？
因此，如果提供了更高的图像，它将缩小得更多以适合
如果图像小于可用空间 ，则应简单显示，背景div仍会填充可用空间。
最大高度：100％似乎非常有用，但这也不起作用。 / p>
此外，我已经看到了如何水平执行此操作的示例（我也需要，但是麻烦），但我不知道如何将其转换为垂直缩放。
您可以设置位置绿色块的相对位置为相对，图像的位置为绝对位置。
还要确保 green 块的高度设置为100％（以获取页面的其余高度）。
这应该可以解决问题：
正文{margin：0;} div＃container {display：flex; flex-direction：列; height：100vh;} div.red {height：100px;背景颜色：红色； flex：0 0 auto;} div.blue {高度：150px;背景颜色：蓝色； flex：0 0 auto;} div.green {background-color：green; flex：0 1自动;职位：相对height：100％;} img {max-height：100％;位置：绝对；}
< 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>
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 - 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/
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.
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>
这篇关于Flexbox：缩小图像以适合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
