Use flexbox to adapt image height
Multi tool use
Use flexbox to adapt image height
I'm trying to build a layout with two rows. The lower row contains images and those should adapt to the available height.
The thing is, that the images change their height, but the width acts weird. Even when I set height: 100% and width: auto.
height: 100%
width: auto
I made a simplified Pen for that: https://codepen.io/oliverspies/pen/zaeVRw
.flexContainer {
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom {
flex: 0 2 25rem;
height: 100%;
max-height: 25rem;
display: flex;
justify-items: flex-start;
align-content: flex-start;
align-items: flex-start;
}
.bottom img {
height: 100%;
width: auto;
display: block;
margin-right: 1rem;
}
Content
</div>So what I want to achieve finally is that the images are 400px high, unless the available height is less, then the images should shrink, but the aspect ratio should stay intact. I think the problem only occurs, when the window is resized so that the images have less than 400px height.
max-height:100%; max-width:100%
@ZohirSalakCeNa I'm afraid this doesn't help anything
– obs
Jul 2 at 12:05
3 Answers
3
I think you should remove the flexbox from the images and just let them be inline as the are by default and use max-height: 100%:
.flexContainer{
display: flex;
flex-direction: column;
height: 100vh;
}
.bottom{
flex: 0 2 25rem;
height: 100%;
max-height: 25rem;
}
.bottom img{
max-height: 100%;
margin-right: 1rem;
}
Content
</div>Thanks, but then the images aren't aligned on the left.
– obs
Jul 2 at 11:03
Actually the images are aligned to the left, you just have large margin-right on the images
– Esko
Jul 2 at 11:39
I need the margin between the images not to change. So I guess this isn't achievable with object fit.
– obs
Jul 2 at 12:04
@obs Then I don't understand what is it that you want, the images can't both be "on the left" and have large margin-right...
– Esko
Jul 2 at 12:36
I dont't want "large margin-right". The thing with object fit is, that the image-container stays the same size, but the image itself adapts. But then the distance to the next image doesn't change. You can leave the margin between the images - than I want that all the images are always touch eachother and there is no free space where the background comes through.
– obs
Jul 3 at 11:05
.flexContainer{
display: flex;
flex-direction: column;
}
ul{
list-style: none;
column-count: 3;
margin: 0;
padding: 0;
}
.top{
background: red;
color: white;
font-size: 1.4rem;
padding: 1em;
padding-bottom: 1em;
padding-bottom: 2em;
flex: 2 0 auto;
}
.bottom{
background: blue;
display: flex;
justify-content: space-between;
}
.bottom > div:nth-child(2){
margin: 0 1rem;
}
.bottom img{
max-width: 100%; vertical-align: top;
}
- one
- two
- three
- four
- five
- six
- seven
- eight
- nine
</div>
</div>When I do this, the bottom part just disappears ...
– obs
Jul 2 at 10:59
hope you checked my code snippet, could you please send the updated snippet with the disappear issue? because there is no element is showing below the image, what is disappears in bottom?
– sata2z
Jul 2 at 12:35
when I click "run code snippet" I only see the red background, not the blue one. It's the same when I apply your code to my pen.
– obs
Jul 3 at 11:06
please review the recordit video for your reference. recordit.co/h76uJwcuWq
– sata2z
Jul 3 at 11:39
thanks for your effort - here is how it looks for me: recordit.co/nHkkvQGlJ0
– obs
Jul 3 at 15:13
You can wrap each IMG with a div.
Then set the div height to 400px
and the img max-height to 100%
.img-wrapper{
height:400px
}
.img-wrapper img{
max-height:100%
}
When I try this, the images don't get smaller, when the available height for the images is less than 400px.
– obs
Jul 2 at 11:04
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
set
max-height:100%; max-width:100%on those images– ZohirSalak CeNa
Jul 2 at 11:38