Keep an image inside a max_width, max_height delimited box - css

Question

I want an image to be 'inside' a box delimited by max_width and max_height.
Instead the image goes over/under the text below.
Should work also in IE10 and above.
.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img
max-height: 90%;
max-width: 90%;
}
.text {
color: red;
font-size: 14px;
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 1

I think you should inherit the max-width and max-height value for img from it's div container. Please review if this is what you are looking for:
.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img{
max-height: inherit;
max-width: inherit;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 2

Even though you set max-width or max-height you need to have a specified width or height property here.
.image {
margin: 0 0.75rem 0 0;
}
.image img {
max-height: 9.75rem;
max-width: 14.625rem;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350" />
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>

Answer 3

.image {
max-height: 9.75rem;
max-width: 14.625rem;
margin: 0 0.75rem 0 0;
}
.image img {
display:block;
max-height: 9.75rem;
}
.text {
color: red;
font-size: 14px;
}
<div class="section">
<h3 class="title">Image</h3>
<div class="image">
<img src="http://via.placeholder.com/350x350"/>
</div>
</div>
<div class="section">
<h3 class="title">Item</h3>
<div class="text">Lorem ipsum sic dolores</div>
</div>