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

我尝试使用宽度：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;
}

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

CSS用于徽标行

2 个答案: