htmlのレスポンシブデザインについて

Question

模写コーディングにチャレンジしています。
レスポンシブデザインで画像の大きさを調整する事に苦戦しています。
やりたい事は、画面幅を小さくしていくと、画像のサイズが勝手に小さくなようにする事です。
問題点としては、画面幅を小さくしていくと、画像のサイズが小さくなるのと同時に、aside要素の高さが同じままなので、下に大きく余ってしまう事です。
対処法教えて頂けると助かります。

追記)情報不足で申し訳ないです。
asideの下にはfooterタグがある為、高さは一定にしたいです。
画面幅によって高さがばらついてしまう事が課題です。

<div class="aside-image">
        <img src="../images4/company.png">
        <img src="../images4/recruit.png">
        <img src="../images4/contact.png">
      </div>

img{
  max-width:100%;
  height:auto;
  display:block;

.aside-image{
  display:flex;
  margin-top:30px;
  background-color:#fff;
  max-width:100%;
}

.aside-image img{
  width:33.33%;
}

@media(max-width:960px){

　aside{
    height:3000px;
  }
  .aside-image{
    flex-direction:column;
  }
  .aside-image img{
    width:100%;
  }
}

Comments

[Lhankor_Mhy]

「下に大きく余ってしまう事」をお悩みとのことですが、余った高さはどのようにしたいのですか？ aside の高さを小さくしたいのですか？

[Lhankor_Mhy]

追記拝読。
ヘッダ→メイン・サイド→フッタ、のような2カラムレイアウトでしょうか。
たとえば、サイドの画像が100*100で3枚、メインの高さが400とすると、サイドも400になると思いますが、余ったスペースはどのようにしたいのですか？　余白でいいということですか？

[puti3809]

https://danblog.tokyo/#
このサイトのレスポンシブデザインにチャレンジしています。
説明が下手で申し訳ないです。

[Lhankor_Mhy]

拝見しましたが、aside-image も aside も存在しないようでした。

「こうなると思って」
「こう書いたら」
「こうなった」
のように、期待・コード・結果をご提示いただくと、回答が得られやすいです。