Responsive images in CSS are pretty easy: just set the width: 100% and height: auto and you're good to go. Things get a little unpredictable, though, when dealing with background images. Since putting a height on the element causes lots of responsive headaches, one workaround is to have the container scale by its aspect ratio. This can be achieved by setting a few attributes to the element's :after tag:
.my-element {
overflow: hidden;
position: relative;
}
.my-element:after {
content: "";
display: block;
height: 0;
padding-top: 56.25%; /* Aspect ratio = height divided width times 100 */
}See a CSS demo, or grab this handy Sass mixin.
Daniel Box
Designer, KNI
