html - 图像不会在 flexbox 内缩放

Question

当图像在 flexbox 中时，它不能正确缩放(高度不能自动调整)。

这是它在 flex 外部工作而不在内部工作的示例；

.image-size{
  height:auto;
  width: 300px;
}
.container{
  display: flex;
}

<img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" />
<div class="container">
  <img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" />
</div>

这里发生了什么？

Answer 1

这是 Flexbox 的一个常见问题。您必须将图像放入 display:block 项中。 figure 默认是 block 容器。这是一个解决方法:

    .image-size{
      height:auto;
      width: 100%;
    }
    figure{
      width : 300px;
    }
    .container{
      display: flex;
    }
    

    <div class="container">
      <figure>
        <img class="image-size" src="https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.png" alt="circle" />
      </figure>
    </div>