3

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?

Guerrilla
  • 13,375
  • 31
  • 109
  • 210
  • What's wrong? The both of them have their width set not height.Nor does the flex parent have a width or height –  May 03 '17 at 12:01
  • The first image scales, the second image doesn't, did you click run? – Guerrilla May 03 '17 at 12:02
  • Where is the scaling? With applied width of 300px, they are both the same size –  May 03 '17 at 12:03
  • how can you not see? The first image has height of 300px automatically set, second image has height of 2400px. – Guerrilla May 03 '17 at 12:07
  • Giving negative scores for free help-trials is never a good idea. Your aim is not described, but judging by the random usage of the flexbox model, I think the problem here is fundamental. – Tanasos May 03 '17 at 12:09
  • giving negative scores to solutions that dont work is the purpose of the rating system – Guerrilla May 03 '17 at 12:10

1 Answers1

8

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>
Baptiste Arnaud
  • 2,522
  • 3
  • 25
  • 55