Question

我想告诉我的CSS代码，如果浏览器调整大小，那么也要调整徽标大小。

所以这就是我所做的：

 #logo {
background:url('../images/logo.png');
    background-repeat:no-repeat;
    max-width:423px;
    max-height:99px;
    width:100%;
    height:100%;
    display:inline-block;
}

如果有人能告诉我如何解决这个问题，我将不胜感激？我不明白我做错了什么。

在我的HTML中，我有这个：<div id="logo"></div>

除非我带走width:100%; height:100%，否则徽标不会显示，我必须将其替换为像素的确切尺寸。

编辑：我正在尝试缩小徽标，当浏览器调整为较小的尺寸时，希望这会使它更清晰，但它现在不会显示。

感谢。

Answer 1

您有最大宽度和最大高度。显然，如果徽标的100％都高于你设定的数量，它将不再增长。

Answer 2

你可能会玩

background-size: contain;

尝试调整结果名称（使其宽度非常小）此处http://jsfiddle.net/f6F86/

Answer 3

你需要做的是设置宽度：423px;和身高：99px;并且对于最大宽度：100％;

Answer 4

您可以使用img＆amp;放置绝对max-width标记作为div的背景。 max-height以百分比形式应用。这样，当您调整页面大小时，div会缩小并导致img缩小。

看到这个小提琴：http://jsfiddle.net/avrahamcool/j5Kwr/2/

Answer 5

您可以尝试将图像直接放在HTML标记中。这使得设置宽度和高度的要求变得多余。

CSS

#logo {
        max-width:423px;
        max-height:99px;
        width:100%;
        height:100%;
        display:inline-block;
    }

HTML

<div class="logo">
   <img src="link_to_image_here" alt="" />
</div>

Answer 6

试试这个：

#logo {
    background:url('../images/logo.png');
    background-repeat:no-repeat;
    width: 100%;
    max-width:423px;
    height: 99px;
    max-height:99px;
    background-size: 100% auto;
    background-position: 0 0;
    display:inline-block;
}

如何在div标签背景中设置100％？

6 个答案: