画像を縮小したいです

Question

上の画像のように、幅を縮めると画像も小さくしたいのですが、
下の画像のようになってしまいます。
どうすればいいのでしょうか。

<div class="main_forth">
            <div class="main_blue">
                <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。<br>フリーランスには<span>プログラミングスキル以外</span>が大切。</p>
            </div>
            <h3>iSara<small>[イサラ]</small>で学べること</h3>
            <p>iSaraの学習では、エンジニアとして稼ぐために必要な能力を身につけます。</p>
            <ul>
                <li><img src="../images/o32.jpg"></li>
                <li><img src="../images/o33.jpg"></li>
                <li><img src="../images/o34.jpg"></li>
                <li><img src="../images/o35.jpg"></li>
            </ul>
            <p id="main_forth_p">これらを教えるのがiSaraです。</p>
        </div>

.main_forth{
    ul{
      display: flex;
      justify-content: space-around;
      max-width: 890px;
      margin: 0 auto;
      li{
        margin: 30px 26px;
      }
    }
    img{
      max-width: 180px;
      max-height: 180px;
    }
  }

Answer 1

こちらでいかがでしょうか?

.main_forth {
  ul {
    display: flex;
    justify-content: space-around;
    max-width: 890px;
    margin: 0 auto;

    li {
      margin: 30px 26px;
      
      /* 追加 */
      flex: 1 1 0%;
    }
  }
  img {
    /*
    max-width: 180px;
    max-height: 180px;
    */
    
    /* 追加 */
    width: 180px;
    max-width: 100%;
    display: block;
  }
}

Answer 2

以下ではどうでしょう？

img{max-width:100%;max-height:100%;width:auto;height:auto;}

Comments

[退会済みユーザー]

できました！
ありがとうございます。