Responsive design is truly about each and every point in between the smallest supported viewport and the largest, which leaves a lot of possibilities. If truly designing for a fully responsive experience, you should give attention to the awkward moments of change. One of those moments is when an element comes into contact with the edge of the screen.
If there is a centered image on the page with no border or additional styles around it, what happens when the width of the browser window is about 10px wider than the image? It leaves a small gutter along each side. Is this an issue? Maybe not. I still think it deserves consideration.
It depends on the case, but on a few occasions I have adjusted the behavior of those images so that there are no awkward in-between moments. When the image got to have less than 10px on each side, I stretched the image to fill the entire width of the screen. This is usually okay, as long as the image has a little extra resolution to give. Of course, we wouldn’t want to stretch an image beyond it’s natural size.
If this is applied to an image, this means that there are no situations where the image has a small gutter along each side, which means that each and every moment along the responsive spectrum has been thought of and cared for.
Was this helpful? Have a question? Let me know!