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

Question

[Caramba66]

Есть следующий код:

<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;
}

Comments

[Ankhena]

1. flex-shrink: 0;
2. А что им делать по-вашему? Разберитесь с шириной блока .flex и его дочерних элементов. Возможно, задайте wrap.

Answer 1

[fallus]

Дай им flex-grow: 0;

Comments

[Ankhena]

grow 0 запретит расширение элемента
shrink - уменьшение