Two columns, Image Left Content Right - Resize image not content - html

Question

I have a two column layout image left and text content right. When the screen resizes, the text content is resizing. How can I adjust the code so that the image resizes instead of the text?
<div class="content-block-container">
<img src="image.jpg">
<div class="content-block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim
ut. Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat justo.
</p>
<pLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim ut.
Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat
justo.</p>
</div>
</div>
<style>
.content-block-container {
align-items: end;
display: flex;
}
.content-block-container img {
border: 5px #fff solid;
margin-right: 30px;
}
.content-block-content {
display: flex;
flex: 1;
flex-direction: column;
}
img {
height: auto;
max-width: 100%;
}
</style>
jsfiddle

Answer 1

This sets a min-width of content-block-content and width of img which should do as you are looking for it to do.
Be careful using img instead of setting a class (ie <img class="article-img") as this will affect all <img> tags.
.content-block-container {
align-items: end;
display: flex;
}
.content-block-container img {
border: 5px #fff solid;
margin-right: 30px;
}
.content-block-content {
display: flex;
flex: 1;
flex-direction: column;
}
img {
height: auto;
max-height: 150px;
max-width: 150px;
width: 20%;
}
<div class="content-block-container">
<img src="https://via.placeholder.com/150">
<div class="content-block-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim
ut. Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat justo.
</p>
<pLorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis justo nisl, vel suscipit lectus dignissim ut.
Aenean sed auctor lorem. Suspendisse eget dapibus est, a egestas dolor. Phasellus lobortis non lacus in sodales.
Mauris at est justo. Quisque at risus eu odio lobortis suscipit. Etiam nulla elit, tincidunt feugiat nunc a,
vulputate volutpat lectus. Integer commodo at tellus a tristique. Suspendisse nec sollicitudin sem, non volutpat
neque. Donec maximus nec purus vel fermentum. Mauris eu nulla efficitur, pharetra dolor fringilla, placerat
justo.</p>
</div>
</div>

Answer 2

You can add a "width" attribute with precent value into your img tag like this:
<img src="image.jpg" width="30%">