img width 100% in display: box (css flexbox parent)

I am trying to resize an image to be the width of its parent div; normally width: 100%; works fine, but when the parent has display: box; the img is not resized. Giving the child image box-flex: 1 has no effect.

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;">
  开发者_JS百科<img src="foo.jpg" style="-webkit-box-flex: 1;" />
</div>

---

Maybe you have solved this, but you can use (Providing example for mozilla)

IMAGE {
  display: -moz-box;
  -moz-box-flex: 1;
}
#cont {
  -moz-box-orient: horizontal;
  display: -moz-box;
}

Haven't tested the example and in worst case you need to make some tweek, but i'm pretty sure it's correct.

---

Granted this is an old question, however, it still shows up in searches so wanted to update with an answer:

Currently in Chrome 23 and Firefox Nightly 21.0a1 this layout works to keep the image the size of the parent div and resize (along with keeping it centered).

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe">
  <div>
     <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/>
  </div>
</section>

CSS

#holdMe {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      -ms-justify-content: center;
      -o-justify-content: center;
      justify-content: center;
    }
    #holdMe img {
      width: 100%;
    }

---

Browser?

I'm not aware of any browser that supports the flexbox spec without vendor prefixes.

display: -moz-box; and display: -webkit-box; etc.

Actually, I just looked at your code again... if you're using flex on the images, you don't need the width declaration since flex defines width dynamically.

You should also define the width of the parent div.