Borders on responsive images
This is a quick-tip type post, nothing major but a simple and effective tip for getting responsive borders on responsive images in your responsive designs.
As we know all too well, we can’t specify borders as percentages. This is a major annoyance if you’re working (or attempting to work) large borders into a responsive design. It may not be all that difficult with images, it turns out.
Instead of applying something like this:
img{
max-width:100%;
border:5px solid red;
}
Simply use:
img{
max-width:98%;
padding:1%; /* A percentage that, when doubled and added to the above, makes 100%. */
background:red; /* Color of the faux border. */
}
Demo
I made a jsFiddle and here is its output.
Now this does seem ridiculously obvious but a quick bit of Googling (other search engines are available) yielded nothing similar. Apologies is someone’s beaten me to this and I’m retreading old ground.