CSS для строк логотипов

Question

Я пытаюсь закодировать ряд логотипов в нижнем колонтитуле сайта https://www.andromedi.com/

Настольная версия работает нормально, но мобильный телефон должен выглядеть как this

Я проверил онлайн и, по-видимому, можно использовать flexbox (мне все еще нужно лучше понять разницу между css-grid и flexbox)

Код css:

.footer-asociaciones-wrapper {
  width: 100%;
  margin: auto;
  padding: 1.5rem 5rem;
}


.footer-asociaciones-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.footer-asociaciones-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.footer-asociaciones-column img {
    height:100px;
}

.footer-asociaciones-column a {
    margin: auto;
}

p.footer-asociaciones-title {
  padding: 1.5rem 1rem;
  color: white;
  font-family: 'DIN1451EngschriftRegular';
  font-size: large;
}

Iпробовал использовать ширину: 33%;но тогда логотипы перекрываются

Любая помощь приветствуется.Спасибо!

Answer 1

Вам нужно указать размеры изображений max-width и max-height, чтобы они изменялись в зависимости от размера их контейнеров. Автоматические значения для height и width предназначены для поддержания соотношения сторон изображений.

.footer-asociaciones-column img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  width: auto;
}

Answer 2

Итак, благодаря @BugsArePeopleToo, я придумала решение:

.footer-asociaciones-column {
    display: flex;
  flex-direction: column;
  flex-basis: 33%;
}

@media screen and (min-width: 481px) {

    .footer-asociaciones-column {
        flex-basis: 100%;
        flex: 1;
    }

}

.footer-asociaciones-column img {
  max-width: 100%;
  max-height: 100px;
  height: auto;
  width: auto;
}