Logo 行的 CSS

Question

我正在尝试在网站 https://www.andromedi.com/ 的页脚中编写一行 Logo

桌面版工作正常，但移动版需要看起来像 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;
}

我尝试使用 width: 33%;然后the logos overlap

感谢任何帮助。谢谢!

Answer 1

您需要为图像指定 max-width 和 max-height 尺寸，以便它们根据容器的大小而变化。 height 和 width 的自动值用于保持图像的纵横比。

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