CSS: изменение размера логотипа с сохранением аспекта в браузере

Question

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

Это мой логотип css, и когда я изменяю высоту и ширину на x%, он просто обрезает нижнюю и правую сторону моего логотипа.Как я могу стилизовать свой логотип, чтобы он оставался на 5% ширины браузера, сохраняя при этом аспект?Спасибо

Answer 1

Ваше изображение должно быть тегом <img>, а не фоном, а CSS этого тега <img>:

#logo_img{
    width:5%;
}

при условии, что родительский элемент #logo_img имеет ширину 100%.

Answer 2

Возможно на фоновом изображении. Смотрите это демо на CSSplay . Этан Маркотт также предлагает подробные методики , которые могут подойти для вашего приложения.

Answer 3

Конечно, используя элемент <img> для изображений.