Make image scale with parent container when screen is re-sized

Question

In my liquid layout, my div elements have the property position-fixed. This means that as I re-size the browser, all the elements remain in the sam

Answer 1

Try:

img {
  max-width: 100%; 
  max-height: 100%;
}
figure {
  height: 100%;
  width: 100%;
  margin: 0;
}

figure is the parent element, so you need to set it's height/width as well. Also, the default styling on figure includes a margin, so you need to remove that to keep the image inside of the parent div. Also, you may need to make the max-height smaller to account for the caption if you want to keep that inside of the parent div.

You can also use width and height instead of max-* if you want the image to always fill the parent regardless of its native size.