图像在Flexbox中无法缩放 [英] Image doesn't scale inside flexbox

问题描述

当图片在Flexbox内时，无法正确缩放(高度不会自动调整).

When an image is inside a flexbox it doesn't scale properly (height doesn't auto adjust).

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

Here is example of it working outside flex and not working inside;

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

这是怎么回事?

推荐答案

这是Flexbox的常见问题.您必须将图像放入display:block项目.默认情况下，figure是一个块容器.解决方法:

Its a common problem with Flexbox. You must put your image into a display:block item. figure is by default a block container. Here is a work around :

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

这篇关于图像在Flexbox中无法缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！