How to make an image fit its content - html

Question

[Tree with all its leaves off the brancges[1]
[1]: https://i.stack.imgur.com/hfQGM.png
Im trying to make the image fit to the bottom left and top of the inside border, but not the right i just want it to fit in that certain space.
This is what i have so far...
<section class="winter">
<div class="outside-border">
<div class="section-heading">
<h2>Winter</h2>
</div>
<div class="inside-border">
<div class="winter-image">
<a href="winter.html">
<img src="assets/images/winter.jpg" alt="Winter Image">
</a>
</div>
<div class="section-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolore enim sequi dignissimos vel fugit
reiciendis minus voluptatem nostrum, at repellat odio libero cum eveniet officiis, cumque veritatis, qui
eaque.</p>
</div>
</div>
</div>
css
.outside-border{
border: 2px solid var(--winter-primary);
margin: auto;
max-width: 1000px;
background-color: white;
padding: 20px;
margin-bottom: 20px;
}
.section-heading{
width: 100%;
background-color: var(--winter-primary);
text-align: center;
}
.section-heading>h2 {
margin: 0;
}
.inside-border{
border: 2px solid var(--winter-primary);
display: flex;
align-items: center;
background-color: var(--winter-light);
}
.section-content{
background-color: var(--winter-light);
}
.winter-image{
display: inline-flex;
background-size: cover;
}
p{
margin-left: 1em;
text-align: center;
padding: 10px;
}
Now im just saying the same thing over and over again because im a stupid newbe coder that is having trouble with this problem. Stack overflow says i need to add more words because all i have is code right now.

Answer 1

try to put margin and padding 0.
hope this helps
.winter-image{
display: inline-flex;
background-size: cover;
margin: 0;
padding: 0;
}