Menu Toggle

Responsive Web Design – Image Borders

  • CSS3.
  • Design.
  • Development.
  • HTML5.

Responsive Web Design is a big deal – it means building websites that work across devices. This is achieved using principle outlined by Ethan Marcotte here. If you’re reading this post, then you’ll know how that works (ems, percentages, and CSS media queries). However, I came across a problem – the fact that borders can’t be sized using percentages!

The first solution I found to the problem is to use the following CSS code:

img {
width: 98%;
padding: 1%; /*padding and width must add up to 100%*/
background: #fff; /*this is the border colour*/
display: block; /*to avoid nasty extra space under your img*/
}

This is all fine and dandy until you want to start using jQuery effects (such as hover effects etc.) that change the image somehow. Lets say I want a semi-transparent block to slide up on hover and reveal info about the image. This is going to cause problems, because it will be visible above the ‘border’ we have created using padding. I needed another solution and thankfully, one came to me pretty quickly. If you wrap your image in a div, you can apply the ‘border’ effect to that instead of the image. The image will fill the inside of the div (because it will have a width of 100% – you should have specified this earlier in your CSS) and will be responsive. This new div will take it’s width from it’s container.

div {
padding: /*a percentage of the container div using target ÷ context x 100 = result */;
background: #fff; /*this is the border colour*/
}

You can now apply your jQuery effects and not worry about nasty padding overlay!

Any questions, get in touch.