How to make an image fit its content-CodePudding

[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 >
  <div >
    <div >
      <h2>Winter</h2>
    </div>
    <div >
      <div >
        <a href="winter.html">
          <img src="assets/images/winter.jpg" alt="Winter Image">
        </a>
      </div>
      <div >
        <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.

CodePudding user response：

try to put margin and padding 0. hope this helps

.winter-image{
display: inline-flex;
background-size: cover;
margin: 0;
padding: 0;
}