-1

我试图告诉我的 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%，否则徽标不会显示，我必须将其替换为以像素为单位的确切大小。

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

谢谢。

4

6 回答 6

2

你有一个最大宽度和一个最大高度。显然，如果徽标的每个 100% 高于您设置的数量，它就不会再增长。

于 2013-09-08T16:41:39.560 回答
1

你可能可以玩

background-size: contain;

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

于 2013-09-08T17:20:30.220 回答
0

您可以尝试将图像直接放在 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>
于 2013-09-08T17:00:55.860 回答
0

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

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

于 2013-09-08T16:48:34.780 回答
0

你需要做的是设置宽度：423px; 和高度：99px；对于最大宽度：100%；

于 2013-09-08T16:48:13.650 回答
0

尝试这个：

#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;
}
于 2013-09-08T17:10:53.700 回答