html - Flex 与子元素混淆

Question

我正在尝试学习 flex 并且仍然是 CSS 的初学者。我正在尝试制作一个显示 4 张图像并排显示的 flex，所有图像的大小都相同。当我在 img 周围添加一个锚元素时，它会发生这种奇怪的重叠而不是改变图像大小，我认为它改变了锚的大小，但使图像保持全尺寸。我怎样才能解决这个问题？另外，使用 scss 而不是 css。

HTML：

 <div class="row">
        <a href="#"
          ><img src="images/restaurants/logo1.png" alt="Branch 1 logo"
        /></a>

        <a href="#"><img src="images/icons/menu.png" alt="Menu icon" /></a>
        <a href="#"> <img src="images/icons/map.png" alt="Map icon" /> </a>
        <a href="#"> <img src="images/icons/call now.png" alt="Call Now" /> </a>
      </div>

(scss):

.card {
  .row {
    display: flex;
    max-width: 100%;
    padding: 0% 0.2rem 0 0.2rem;
    padding-top: 0.5rem;
  }

  .row > * {
    width: 23.5%;
    flex-basis: 1;
    margin: auto;
  }

谢谢

标签： htmlcsssassflexbox

Answer 1

在 CSS 文件中的样式下方添加 CSS

img{
  width:100%;
}