CSS: resizing logo while maintaining aspect with browser

Question

#logo {
    background: url(/images/logo.png) 0 0 no-repeat;
    width: 268px;
    height: 96px;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
}

This is my logo css and when I change the height and width to x% It just cuts of the bottom and right side of my logo image. How can I style my logo so that it stays at 5% of the browser width while maintaining aspect? Thanks

Answer 1

It is possible in a background image. See this demo at CSSplay. Ethan Marcotte has also detailed techniques that may fit your application.

Answer 2

Your image has to be an <img> tag, not a background, and the CSS of this <img> tag :

#logo_img{
    width:5%;
}

assuming the parent of #logo_img is 100% in width.

Answer 3

By using the <img> element for images, of course.