[英]Make image take full height of flex item
I have a container that is 100vh (minus the fixed nav height). 我有一个100vh的容器(减去固定的导航高度)。
<section class="container">
Inside this container I have some text: 在这个容器里面我有一些文字:
<div class="text">
<p>title</p>
</div>
Which can be of any length as the content is dynamic. 由于内容是动态的,因此可以是任何长度。
Below this text I have an image: 在本文下面我有一个图像:
<div class="image">
<img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg">
</div>
The image needs to fill the rest of the 100vh (- nav height) container. 图像需要填充100vh( - 导航高度)容器的其余部分。
I use: 我用:
.container{
display:flex;
flex-flow: column nowrap;
....
The issue I am having is that I need the image to be the height of the rest of the space. 我遇到的问题是我需要将图像作为剩余空间的高度。
How can I do this? 我怎样才能做到这一点? In my fiddle, if your screen is small it is being cut off and if your screen is large it does not fill the space.
在我的小提琴中,如果你的屏幕很小,它会被切断,如果你的屏幕很大,它就不会填满空间。 Height: 100% fails to work, making it too large.
高度:100%无法工作,使其太大。
Flex solutions only please, no table tricks - thanks! Flex解决方案只是请,没有表格技巧 - 谢谢!
Make the image container ( .image
) a flex container with height: 100%
. 使图像容器(
.image
)成为height: 100%
的Flex容器。
You can then fine-tune the image's aspect ratio and alignment with object-fit
/ object-position
. 然后,您可以微调图像的纵横比并与
object-fit
/ object-position
对齐。
nav { position:fixed; background:grey; width:100%; height: 100px; } main { padding-top: 100px; } .container { display:flex; flex-flow: column nowrap; height: calc(100vh - 100px); background: green; border: 3px solid brown; } .text { background: yellow; } /* ***** NEW ***** */ .image { display: flex; justify-content: center; height: 100%; } img { width: 100%; object-fit: contain; }
<nav>Nav</nav> <main> <section class="container"> <div class="text"><p>title</p></div> <div class="image"> <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> </div> </section> <section class="container"> <div class="text"><p>hello</p></div> <div class="image"> <img src="https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg"> </div> </section> </main>
Note that the object-fit
property is not supported by IE. 请注意,IE不支持
object-fit
属性。 For more details and a workaround see: https://stackoverflow.com/a/37127590/3597276 有关更多详细信息和解决方法,请参阅: https : //stackoverflow.com/a/37127590/3597276
Maybe not exactly what you wanted, but if you move the image to a div and use it as a background, you can get the desired effect. 也许不完全是你想要的,但是如果你将图像移动到div并将其用作背景,你就可以获得所需的效果。
HTML: Nav HTML:导航
title 标题
<section class="container">
<div class="text">
<p>hello</p>
</div>
<div class="imageWrap">
<div class="image"></div>
</div>
</section>
</main>
CSS: CSS:
nav {
background: grey;
width: 100%;
height: 100px;
position: fixed;
}
main{
padding-top: 100px;
}
.container{
display: flex;
flex-flow: column nowrap;
height: calc(100vh - 100px);
background: green;
border: 3px solid brown;
}
.imageWrap {
flex: 1;
display: flex;
}
.image {
flex: 1;
background-size: contain;
background-repeat: no-repeat;
background-image: url(https://s-media-cache-ak0.pinimg.com/736x/d1/a6/64/d1a664bca214bf785a293cbc87950fc4.jpg)
}
.text{
background: yellow;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.