9

我正在尝试创建网站的顶部以在左侧保存徽标，在右侧保存导航栏。图像很大，因为有人告诉我它可能用于高清电视并希望它能够很好地缩放。我想如果我将徽标和导航栏放在同一个 div 中，我可以只对高度应用一个百分比，因此它始终是屏幕的前 10%，但它不会随我的代码缩放，它只是保持相同的图像大小。任何帮助将非常感激。

<body>
<div id="container">
    <div id="top">
    <img src="images/logo.png" alt="logo">
    <ul>
    <li><a href="#" title="1">1</a></li>
    <li><a href="#" title="2">2</a></li>
    <li><a href="#" title="3">3</a></li>
    <li><a href="#" title="4">4</a></li>
    <li><a href="#" title="5">5</a></li>
    </ul>
    </div>
</div>

这是我使用的 CSS

#top {
height: 10%;
width: 100%
}

我真的很感激任何人的帮助。

4

2 回答 2

4

如果您尝试缩放图像本身，则需要在 CSS 中定位图像。

我还建议为您的缩放设置一个最小（也可能是最大）限制。有一点，变小只会看起来很糟糕并且变得无法使用。

html, body, #container {
    height: 100%;
    width: 100%;
}

#top {
    height: 10%;
    width: 100%;
    min-height: 23px;
}

#top img {
    height: 100%;
    width: auto;
    min-height: 23px;
    min-width: 136px;
}

jsfiddle

于 2013-02-21T01:36:17.290 回答
1

您需要为图像提供 10% 的高度，以便它知道随 div 缩放。如果你这样做，我相信它会起作用。

#top img {
    height: 10%;
}

编辑：jsFiddle

于 2013-02-21T01:40:40.013 回答