12_picture_fish.html

I caught a fish and it was this big:

This image contains text advising you that your browser is too old.

The picture element can be used to create responsive images which choose an appropriate image based on the size of the containing area. The bitmap that gets chosen by the browser depends on the size of the viewport.

Currently the viewport is 0 pixels wide as you adjust the size of the window this figure will change. The image will also change, but that is all managed by the browser thanks to the picture element.

The vieport sizes defined in the picture element are...

NB: The img element is required. The picture element provides the img element with a rich context and new mechanisms for selecting source images that are presented therein. This is why when we want to style the image, we can still style img directly (rather than the picture element).