Why is height:auto not working for this image?

Question

I have a flexbox container with two flex items in it. One is an image and the other a paragraph. I've been trying to resize the image proportionally by giving width:some-percentage and height:auto but it's not working. Please help me solve this.

.item{
  display:flex;
}
img{
  width: 25%; /* not working */
  height: auto;
}

<div class="item">
  <img
  src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
  <p>some paragraph</p>
</div>

JSFiddle link - https://jsfiddle.net/dizzyramen/xfot3Lwv/2/

use `align-self: flex-start` on the image - this happens because *stretch* is the default behaviour (`align-items` on the *flex container* or `align-self` on the *flex item*)... see https://jsfiddle.net/947uqszj/ — kukkuz, Jun 18 '19 at 18:36

score 2 · Accepted Answer · answered Jun 18 '19 at 22:28

A default setting on a flex container is align-items: flex-start.

In a row-direction container, this makes flex items, not having a defined height (e.g. height: auto), extend the full height of the container (full explanation).

In this particular case, however, the image is stretching to its fullest, and expanding the size of the container along with it.

The solution is to set a height limit on the container or override the default with align-items: flex-start on the container or align-self: flex-start on the item.

jsFiddle demo

.item {
  display: flex;
}

img {
  width: 25%;
  align-self: start; /* new */
}

<div class="item">
  <img src="https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg" />
  <p>some paragraph</p>
</div>

score 1 · Answer 2 · answered Jun 18 '19 at 18:49

1

here is another option:

wrap your img in a div <div class="image-wrapper"> and set manage the width in this node.
asign width: 100%; height: auto; to the img so it adjust proportionally to its parent.
Here you have it in a snippet. Hope it helps.

<div class="item">
    <div class="image-wrapper">
        <img
            src=
  "https://png.pngtree.com/element_origin_min_pic/16/10/16/105802ebe43fe0f.jpg"/>
    </div>
    <p>some paragraph</p>
</div>

<style>
.item{
  display:flex;
}
.image-wrapper {
  width: 25%; /* means 25% of .item */
}
img{
  width: 100%; /* means 100% of its parent .image-wrapper */
  height: auto;
}
</style>

answered Jun 18 '19 at 18:49

Nico Diz

1,484
1
7
20

I think I understood this approach but why did the width of .image-wrapper become that big so that you had to use width:25%? – dizzyramen Jun 18 '19 at 19:16
1

If you do not set a specific width to a div, for example `.item`, the div has a default display block that fills all horizontal space. – Nico Diz Jun 18 '19 at 20:01
An important part of the question was *why* `height: auto` wasn't working. – Michael Benjamin Jun 18 '19 at 22:29

score -2 · Answer 3 · answered Jun 18 '19 at 19:46

-2

It happens because, per default the tag <img>is inline. You need to change it to block or flex

answered Jun 18 '19 at 19:46

Sergio Expósito Martín

5
2

Sergio, you cannot control the `display` value of flex items. Once you make an element a flex container, the `display` property on flex items is controlled by the flex algorithm. Attempts to set a `display` rule on flex items are ignored by the browser. So changing the `display` value of the `img` to `block` or `flex` wouldn't matter. – Michael Benjamin Jun 18 '19 at 23:51
See the bottom of my answer here for more details: https://stackoverflow.com/a/52471797/3597276 – Michael Benjamin Jun 18 '19 at 23:51

Why is height:auto not working for this image?

3 Answers3