缩放图像以适应flexbox布局
缩放图像以适应flexbox布局
提问于 2018-05-20 00:10:33
我正在使用flexbox进行页面布局。该页面包含一个图像、一个带有文本的div和一个脚注div。图像和文本div应该并排显示。我希望图像缩放到填充父div (带有.main类的div)的高度，同时保持其原始纵横比。文本div将占据剩余的水平空间。页脚将位于底部。
不同大小的期望结果，作为参考：
这是我的现状：https://codepen.io/anon/pen/aGPPaq
body{
margin: 0;
}
.container{
position: absolute;
min-height: 100%;
display: flex;
flex-direction: column;
background: lightgrey;
}
.footer{
flex-grow: 0;
flex-shrink: 0;
background: lightpink;
}
.main {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
height: 100%;
background: yellow;
}
.image{
height: 100%;
}
.text{
background: lightblue;
}<div class="container">
<div class="main">
<img class="image" src="https://picsum.photos/400/600?image=28">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis.
</div>
</div>
<div class="footer">
Footer content (variable height)
</div>
</div>
我发现使用图像的绝对定位来缩放图像是可能的，但这种方式不会将文本推到右侧(图像将覆盖文本)。用于此的css：
.main {
/* ... */
position: relative;
}
.image{
position: absolute;
height: 100%;
}我似乎想不出如何实现这个看似简单的布局。有人有什么建议吗？
谢谢!
回答 2
Stack Overflow用户
发布于 2018-05-20 00:22:01
你可以做这样的事情。您需要为图像高度设置vh单位(视口高度)。但你也需要排除你的页脚height从图像，如果不想滚动。
body{
margin: 0;
}
.container{
position: absolute;
min-height: 100%;
display: flex;
flex-direction: column;
background: lightgrey;
}
.footer{
flex-grow: 0;
flex-shrink: 0;
background: lightpink;
}
.main {
display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
background: yellow;
}
.image{
height: calc(100vh - 18px);
width: auto;
}
.text{
background: lightblue;
}<div class="container">
<div class="main">
<img class="image" src="https://picsum.photos/400/600?image=28">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis.
</div>
</div>
<div class="footer">
Footer content (variable height)
</div>
</div>
Stack Overflow用户
发布于 2018-05-20 03:47:34
在您的代码中，我只添加了更改...我添加了宽度为50%，但您可以根据您的要求更改图像的宽度。
body{
margin: 0;
}
.container{
position: absolute;
min-height: 100%;
display: flex;
flex-direction: column;
background: lightgrey;
}
.footer{
flex-grow: 0;
flex-shrink: 0;
background: lightpink;
}
.main {
display: flex;
/* flex-direction: row;
flex-grow: 1;
flex-shrink: 1; */
width:100%;
background: yellow;
}
.image{
height: 100%;
width:50%;
}
.text{
background: lightblue;
}<div class="container">
<div class="main">
<img class="image" src="https://picsum.photos/400/600?image=28">
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce neque sem, congue nec malesuada ac, cursus eu metus. Aliquam euismod malesuada massa, ac iaculis nunc mollis nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer dictum finibus magna, nec lacinia lacus euismod ut. Nam non tellus odio. Morbi condimentum finibus scelerisque. Aenean semper, erat faucibus fringilla faucibus, lectus turpis congue lorem, nec consequat arcu magna eu felis. Praesent eget quam velit. Nam in sapien ut augue imperdiet convallis.
</div>
</div>
<div class="footer">
Footer content (variable height)
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50427167
复制相关文章
相似问题
腾讯云开发者
