I set the img height as auto and the width to 100%. the width worked as expected, but the height didn’t as it overflowed the figure container whose height is specified-- the img is contained in the figure tag. On different view-ports the height is changing.
Here is what i am saying:
This’s the figure’s height, 50px;
I’m a bit confused!
Here is the CSS:
html, body{
height: 100vh;
}
body{
display: flex;
flex-flow: column;
margin: 0;
}
main{
display: flex;
flex: 2 1 auto;
}
.aside {
display: flex;
flex-flow: column;
flex: 0 0 3em;
background-color: #e6dfdfc5;
align-items: center;
justify-content: center;
}
.aside i{
margin-bottom: 3em;
font-size: 1em;
}
.main{
background-color: rgba(245, 245, 245, 0.801);
flex: 1 1 auto;
display: flex;
justify-content: center;
}
.footer{
background-color: rgba(45, 110, 252, 0.993);
flex: 0 1 4em;
}
figure{
flex: 1 1 auto;
background-color: red;
margin: 0;
height: 18.5em;
}
img{
width: 100%;
height: auto;
}
@bbsmooth
Hello !
I think, as the width is set to 100% of the container, the program calculate the height to keep the proportion of the image.
If you want your image to fit in the container, you should specify in your image’s properties max-height: 100%; but it won’t be 100% of the width (keeping proportions).
If you want your image to be cut if it overflows, well I’m not sure how to proceed, you should make a quick search on internet…
Sorry if it’s a bit confusing, my english is not perfect. Tell me if you have questions.
overflow: hidden on the figure tag worked. But why is it overflowing while the height is set to auto?
without the overflow property, i got this:
i want to know why it is popping out of the figure container.
Because with the “auto” setting “the browser calculates the height.” according to other settings. If you tell it that the width is 100% of the container, the browser will take this information of width and calculates: “So the width must be XX wide, I must keep the ratio height/width, so the height must be : XX”. And it doesn’t mind if it overflows the container or not.
In most cases, the “auto” height and/or width is the default option and makes the image take all the page width (minus margins, etc.). Containers don’t stop them by its own.
Depending on if you want to cut/hide the overflowing image (and keeping it container wide) or have your image’s height fitting your container (and it won’t be container wide anymore), there’re 2 solutions.
From what I understood, you want to hide the overflowing part of your image, so you have to specify the property overflow: hidden; like you did.
1 Like
I had to refer to this to get the concept better. They never mentioned that the height will keep the img from overflowing its container.
I understood it better(your solution) when i swapped the width and height values.
