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默认为块容器。这是一个解决方法：

＆＃13;

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

＆＃13;

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

＆＃13;

图像无法在flexbox内缩放

1 个答案: