图像无法在 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默认情况下是块容器。这是一个解决方法：

    .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>