Как сделать так что бы картинки не схлопывались при уменьшении страницы?

<div class="flex">
      <div class="div"><a href=""><img src="img/online.jpeg" alt=""></a><a href="">Текс 1</a></div>
      <div class="div"><a href=""><img src="img/ves.jpg" alt=""></a><a href="">Текс 2</a></div>
      <div class="div"><a href=""><img src="img/ias.jpg" alt=""></a><a href="">Текст 3</a></div>
  </div>

.flex{
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
    width: 58%;
    margin: auto;
}
.flex img{
    width: 230px;
    height: 166px;
    max-width: 100%;
    height: auto;
}
.flex div{
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.flex a{

}
.flex a{
    margin-bottom: 2%;
    font-size: 1.2em;
    text-decoration: none;
    color: black;
    font-weight: 600;
}
.flex a:hover{
    color: #202ab3;
}