Bootstrap Image Swap

If you're viewing this with a large device squeeze the browser to see the effect. For the example I created three different aspect ratio versions of the image.

This bit of code uses CSS's srcset to change the image according to the browser size. What might you wish to do this? Because images and text don't resize proportionately you may choose to go with a taller vertical images with smaller devices so that the text doesn't overflow the space and start to look strange.

In some case what designers do to solve that problem is to reduce the text for medium and smaller devices to eliminate the overflow.

Without the Swap?

Here is what you might see without the swap. Squeeze the browser and enjoy the ride.