making a image responsive in a flexbox
I think I am going to pull my hair out. I have such a hard time making images respond how you want them to. Anyone know any good help videos or articles? here is my issue that I have.
7 Replies
trying to get this look, the top and bottom evenly measure
if I add a fixed height on the image at one point the image will reduce not evenly
it'll really help if you can add a codepen or other live version that demonstrates the problem
looks like you're using bootstrap?
That code looks like it'll match the second image if you have an image tall enough. https://codepen.io/brumgb/pen/YzBLQPR
I can put in code pen but images dont transfer since I am using the free version
I am using basic html and css. no bootstrap
Also I am trying to mimic the first photo, the one with the red border around it. see how its perfectly flush with the top and bottom with the text and image
KP had a ton of flexbox (and grid!) videos!!
Please don’t put a fixed height! To start, A common image reset is
img {max-width: 100%; display: block;}
To get the look of the first screenshot is difficult because it’s a demo. They can make the rectangle that is the “image” to match the height of the text exactly. You can justify-content: center;
so that the text and button is always central to the image. If you put a height on your image, make it a min-height or a max-height or it won’t be responsive You could also optimize your image in an editor to resize /crop it to start at the aspect ratio you want it to be.
https://youtu.be/u044iM9xsWU?si=PIEQNoNXui5eoUVF
https://youtu.be/s3wHkfMz8oE?si=zlqWjYEwMn0jO6cDKevin Powell
YouTube
Learn flexbox the easy way
🎓 I have a course dedicated to Flexbox! https://flexboxsimplified.com
Get the flexbox properties cheatsheet here: https://kevin-powell.ck.page/25792a66b4
🔗 Links
✅ Navigation demo - starting point: https://codepen.io/kevinpowell/pen/JjrKmwy
✅ Navigation demo - ending point: https://codepen.io/kevinpowell/pen/oNGZRLO
✅ 3 columns demo - start...
Kevin Powell
YouTube
Two flexbox & grid behaviors most people don't know about
When we use flex and grid, there are a lot of things that we know are going to happen, like getting columns and whatnot, but a lot of people don't realize how it affects collapsing margins, and also what happens with things that aren't wrapped in elements as well!
🔗 Links
✅ Deeper look at how flex works: https://youtu.be/fm3dSg4cxRI
✅ More ...
Websites are by default responsive. All the things we add to them makes them non-responsive. I wouldn’t start adding flex-grow without intending to. You also don’t need to declare
flex-shrink: 1;
as that is the default for flex-shrink.
I would also recommend that if you have a div just to hold the image, you may as well use the image as a background image on that div instead and then fill the divs padding to achieve the height you want. In that case you’ll need background-size: cover
. But I would have either the div with a bg image or take away that div and just have the image in the container. If you don’t want to optimize the image, maybe try using it as a background image instead.