css - 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>标签，而不是背景，以及此<img>标签的 CSS：

#logo_img{
    width:5%;
}

假设其父级#logo_img宽度为 100%。

Answer 2

当然，通过使用<img>图像元素。

Answer 3

在背景图像中是可能的。在 CSSplay 上查看这个演示。Ethan Marcotte 还提供了可能适合您的应用的详细技术。