How do I prevent the container div from resizing based on content inside?

I'm working on making these circles (currently ovals) align and resize properly. When I made them using pixels, everything was fine. But that was terrible practice, and it looked different on every screen. So we're moving on to percent!

Here's the repo so you can see it in its entirety.

And here's the code from the repo above that I believe to be relevant to the issue:

<a href="#open-java-modal">
  <div class='spec-bubble hover-grow'>
    <img src="img/java-logo.png" alt="Java logo" 
       class='spec-content grayscale' id='java'/>
  </div>
</a>  

And the CSS:

.spec-bubble {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 25%;
  border-radius: 50%;
  text-align: center;
  vertical-align: top;
  margin-bottom: 10px;
  overflow: hidden;
}
.spec-content {
  margin: 0;
  float: left;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
}  

The problem: So you can see that the bubbles are funky... I'm trying to figure out how to make them all size the same (responsively) without depending on what's inside them (the img).
Thanks in advance for any help.