responsive image using picture element

What challenges did you encounter, and how did you overcome them?

Making the image responsive was a challenge. there were three main challenges:-

1. swapping the image between mobile and desktop view.
2. allowing the image to shrink and grow inside it's div.
3. taking the full width and height of the div.

solutions:-

1. using picture element.
2. giving the img a max-width of 100%.
3. giving it a width 100% and height 100%.