Fluid Images (using max-width="100%") with px-based Parent?

Question

I'm trying to use fluid images for a responsive project I'm working on. However, everything I've seen has just told me to put a max-width for the images and it should work. It does work, except for px-based container widths as seen here: http://codepen.io/anon/pen/cCfsF

Is it possible for px-based parents to have fluid images?

My HTML code is:

<div class="container">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>
<div class="container2">
  <img src="https://www.google.com/logos/doodles/2013/franz_kafkas_130th_birthday-1976005-hp.png" />
</div>

and my CSS is:

.container {
  width: 500px;
  background: #f30;
}
.container2 {
   width: 100%; 
    background: #f30;
}
img {
  max-width: 100%;
}

Answer 1

In your example, .container has a fixed width of 500px, and the child images has a width of 100%, so the image will scale to fit the parent container. However, since .container has a fixed width, it will not change as you shrink or expand the window.

As you observed, for the case of .container2 with a percentage width that will respond to the window width, the image will re-size accordingly.

You are seeing the correct behavior, so the short answer to your question is no, at least for the layout that you are looking at.