Clickable link is too large for image

Question

I have looked everywhere for days now and can't seem to figure out this problem with rescaling images (with css only) that are blown way out of proportion (this is for an assignment). The images are supposed to be stacked vertically on a left-side column with a body of text to its right, like this:

Here's the html (cannot be changed):

    <aside class = "left">
        <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee%2C_Jul_2009_-_17.jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5d/Ultimate_Frisbee%2C_Jul_2009_-_19.jpg" alt="Creative Common Ultimate Photo" title="By Ed Yourdon [CC BY-SA 2.0 (http://creativecommons.org/licenses/by-sa/2.0)], via Wikimedia Commons"/> </a>

        <a href="https://commons.wikimedia.org/wiki/File%3AUltimate_Frisbee_Colorado_Cup_2005.jpg"><img alt="Ultimate Frisbee Colorado Cup 2005" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Ultimate_Frisbee_Colorado_Cup_2005.jpg/512px-Ultimate_Frisbee_Colorado_Cup_2005.jpg"/></a>


        <a href="https://www.flickr.com/photos/paradisecoastie/15409853738/" title="Ultimate Frisbee"><img src="https://farm4.staticflickr.com/3948/15409853738_7dbfbfbac7_k.jpg"  alt="Ultimate Frisbee"></a>
    </aside>
    <section class = "right">...

I want to maintain the aspect ratio of the images so I'm using percentages %. But every time I use this, the link still retains its huge size and thereby takes up a huge space inside the aside container. When I try to scale down the link itself, the image is reduced again and the problem persists. Here is my code:

aside.left{
  background-color: #777613;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 0 2% 2% 2%;
  float: left;
  margin-right: 0.5%;
  height: 180vh;
}
aside img{
  display:block;
  margin:20% 0 10% 0;
  height:20%;
  width:20%;
  border:1px solid black;
}

What am I doing horribly wrong? Thanks ahead of time!

Answer 1

    <style>
    aside.left{
      background-color: #777613;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      /*padding: 0 2% 2% 2%; */
      float: left;
      margin-right: 0.5%;
      height: 100%;
    }
    aside img{
      display:block;
     /* margin:20% 0 10% 0; */
      height:100%;
      width:100%;
      border:1px solid black;
    }

    aside.left{
      width: 50%;
    }
    section.right{
      width:40%;
    }
    aside > a{
      height:33.3%;
      margin:0px;
    }
    </style>

This might help. Sorry for the multiple class names.