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

问题描述

这是一个在flex外工作的例子，而不是在flex中工作的例子在里面工作;

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

< img class =image-sizesrc =https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.pngalt =circle/>< div class =容器> < img class =image-sizesrc =https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.pngalt =circle/>< / div>

这里发生了什么？

Flexbox的一个常见问题。您必须将图像放入 display：block 项目中。 图默认为块容器。这是一个解决方案：

.image-size {height：auto;宽度：100％; } figure {width：300px; } .container {display：flex; }

 < div class =container> <图> < img class =image-sizesrc =https://openclipart.org/image/2400px/svg_to_png/233274/arrow-circle.pngalt =circle/> < /数字> < / div>  

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

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>

What is happening here?

解决方案

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