Изображение не изменится, когда я увеличу масштаб, если я передам родительскому div ширину

Question

У меня есть изображение, которое будет изменяться при увеличении и уменьшении, но я хочу увеличить его. Я делаю div, это дитя большего размера, но теперь это не позволяет изменить размер изображения. Если я использую процент для родительского div, не должен ли div сжиматься вместе с изображением, которое он содержит?

HTML

<div class="top-container">
  <div class=name-title>
    <h1 class="name">I'm Tyler</h1>
    <p class="title">A Programmer</p>
  </div>
  <div class="top-container-images">
    <img class="moon" src="images\moon.png" alt="Full Moon">
    <img class="cloud" src="images\clouds.png" alt="Cloud">
    <img class="minneapolis" src="images\Building.png" alt="Mineeapolis Skyline">
  </div>

CSS размеры изображений меняются с помощью:

.top-container {
  background-color: #48466d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.name-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  align-items: center;
}

.name, .title {
  color: #3d84a8;
  margin: .15rem 0 .15rem 0;
}

.name {
  font-family: 'Bangers';
  font-weight: lighter;
  font-size: 5rem;
}

.title{
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
}

.top-container-images {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  align-items: center;
}

.minneapolis {
  width: 100%;
}

.moon {
  width: 10%;
  height: auto;
  align-self: flex-end;
  position: absolute;
  top: 2%;
}

.cloud {
  width: 15%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 10%;
}

CSS размеры изображений НЕ меняются с помощью:

.top-container {
  background-color: #48466d;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.name-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 70%;
  align-items: center;
}

.name, .title {
  color: #3d84a8;
  margin: .15rem 0 .15rem 0;
}

.name {
  font-family: 'Bangers';
  font-weight: lighter;
  font-size: 5rem;
}

.title{
  font-family: 'Open Sans', sans-serif;
  font-size: 2rem;
}

.top-container-images {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  align-items: center;
  width: 70%;
}

.minneapolis {
  width: 100%;
}

.moon {
  width: 10%;
  height: auto;
  align-self: flex-end;
  position: absolute;
  top: 2%;
}

.cloud {
  width: 15%;
  height: auto;
  position: absolute;
  top: 20%;
  left: 10%;
}

/***Middle Container***/

.profile-pic {
  border-radius: 50%;
  background-color: #3d84a8;
}

Заранее благодарим за любую помощь!