Making Image in Div Not Resize - html

Question

I made a div with text and a description alongside an image. They look fine, but when I resize my browser and make it smaller, the image gets smaller. I eventually intend to make this responsive, so how can I make the image not resize when I change the browser size? Here's an example:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: center;
}
.course-brief{
font-weight: normal;
}
.course__header img {
max-width: 30%;
max-height: 30%;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}
<div class="course">
<div class="course__header">
<img src="https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400" class="course-image">
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>
Now, when you run the example, you can see that the image doesn't fit the top, unless you full screen it. Is there a css way to make it fit the top, and not resize when your browser resizes? (I also want it to work with many images, not just this one).
Thanks so much!!!

Answer 1

I've encountered this many times and this is the solution I always land on:
apply the image as a background image to a container,
set the background image to cover, and display: flex; will fill it vertically and horizontally.
place the inline image in the container, but hide it for desktop. Then on mobile, show the inline-image and hide the background-image.
The drawback is focus on the image might not always be in the same place for every image, which depending on your application, might not be important. At this point, you can be granular with placement after all are set, using css. But just depends on your specific situation.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: stretch;
}
.course-brief{
font-weight: normal;
}
.course__header img {
max-width: 30%;
max-height: 30%;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}
.course-image {
background-image: url(https://i.imgur.com/Cn6k0bM.jpg);
background-size: cover;
width: 25%;
background-position: center center;
margin-right: 1rem;
}
.course-image img {
display: none;
width: 100%;
max-width: unset;
}
#media(max-width: 768px){
.course {
flex-direction: column;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-right: 0;
}
.course__header {
flex-direction: column;
align-items: unset;
}
.course-image {
margin: 0;
background-image: unset;
width: 100%;
}
.course-image img {
display: block;
margin-bottom: 1rem;
}
}
<div class="course">
<div class="course__header">
<div class="course-image"><img src="https://i.imgur.com/Cn6k0bM.jpg"></div>
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>

Answer 2

In that case you need to set a fixed width to the image since currently you define its width as 30% of its container that in its turn depends on the window size.
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none;
background-color: #F6F6F6;
}
.course {
cursor: pointer;
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
width: 70%;
margin-left: 15%;
margin-right: 15%;
padding-right: 10%;
}
.course__header {
display: flex;
align-items: center;
}
.course-brief{
font-weight: normal;
}
.course__header img {
width: 200px;
display: block;
vertical-align: middle;
padding-right: 5%;
}
<div class="course">
<div class="course__header">
<img src="https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400" class="course-image">
<div class="course__info">
<h3 class="course-header">THIS IS SOME TEXT</h3>
<h5 class="course-brief">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras tincidunt lobortis feugiat vivamus at</h5>
</div>
</div>
<button class="course-button">
Sign up!
</button>
</div>

Answer 3

The image is resizing according to your screen size because you've used percentage for your image. If you don't want your image resizing, just use a fixed height and width for your image. Example:
.course__header img {
width: 200px;
height: 200px;
width: 30%;
display: block;
vertical-align: middle;
padding-right: 5%;
}

Answer 4

Fixed width is required
width: 200px;
instead of
width: 30%;
If you want to have a fixed height without messing up the aspect ratio, an easy way would be to use the background-image property:
img-wrapper {
background-image: url("https://media.npr.org/assets/img/2013/10/29/gardiner_haussmann_wide-c1eb4ea2508483430321f3d003e8ddda0e1e9324.jpg?s=1400");
background-positon: center;
background-size: cover;
background-repeat: no-repeat;
}