UX Design and Development course

Images setting a responsive reset

Simply put, images are NOT responsive. So, this simple bit of code will you to have responsive images.

img {
display: block;
width: 100%;

What's happening here? Basically by setting your <img> tag to always display: block this will remove an interesting issue with adding 4px of phantom space to the bottom of the image.

Test it out. Place an <img> in your html and put a border on it. See the space?

Next the width. By setting the width: 100%; this will force the image to fill the space that it's contained within.

This DOES mean that you need to always place an <img> within a parent element, I'd suggest using the <figure> element.

Give it a try and see for yourself.