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.
<section class="hero">
<div class="container row">
<div class="hero_info">
<h1 class="hero_title">I Really Need A Coffee</h1>
<p>While I learn how to code, I am in the constant need for coffee to fuel my brain. All I need is one
coffee a day. Just click below! </p>
<button class="hero_button">Buy Me A Cup!</button>
</div>
<div class="hero_image">
<img src="./images/coffeman.jpg" alt="man drinking coffee">
</div>
</div>
</section>
<section class="hero">
<div class="container row">
<div class="hero_info">
<h1 class="hero_title">I Really Need A Coffee</h1>
<p>While I learn how to code, I am in the constant need for coffee to fuel my brain. All I need is one
coffee a day. Just click below! </p>
<button class="hero_button">Buy Me A Cup!</button>
</div>
<div class="hero_image">
<img src="./images/coffeman.jpg" alt="man drinking coffee">
</div>
</div>
</section>
hero {
background-color: #1f2937;
}


.hero_info {
font-size: 18px;
color: #e5e7eb;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 16px;
padding-right: 48px;
flex-shrink: 1;
flex-grow: 1;
flex-basis: 100px;
}

.hero_title {
font-size: 48px;
font-weight: 800;
color: #f9faf8;
}

.hero_image {
flex-shrink: 1;
flex-grow: 1;
flex-basis: 250px;
padding-top: 16px;
}

.hero_image>img {
width: 100%;
object-fit: cover;
}

.hero_button {
padding: 16px 32px;
color: white;
background-color: #3882f6;
border-radius: 15px;
border-style: none;
align-self: flex-start;
}
hero {
background-color: #1f2937;
}


.hero_info {
font-size: 18px;
color: #e5e7eb;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 16px;
padding-right: 48px;
flex-shrink: 1;
flex-grow: 1;
flex-basis: 100px;
}

.hero_title {
font-size: 48px;
font-weight: 800;
color: #f9faf8;
}

.hero_image {
flex-shrink: 1;
flex-grow: 1;
flex-basis: 250px;
padding-top: 16px;
}

.hero_image>img {
width: 100%;
object-fit: cover;
}

.hero_button {
padding: 16px 32px;
color: white;
background-color: #3882f6;
border-radius: 15px;
border-style: none;
align-self: flex-start;
}
No description
7 Replies
David_Kent
David_Kent12mo ago
trying to get this look, the top and bottom evenly measure
No description
David_Kent
David_Kent12mo ago
if I add a fixed height on the image at one point the image will reduce not evenly
Jochem
Jochem12mo ago
it'll really help if you can add a codepen or other live version that demonstrates the problem
Ian UK
Ian UK12mo ago
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
David_Kent
David_Kent12mo ago
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
clevermissfox
clevermissfox12mo ago
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=zlqWjYEwMn0jO6cD
Kevin 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 ...
clevermissfox
clevermissfox12mo ago
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.
Want results from more Discord servers?
Add your server