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;
}
