Question

我正在尝试创建网站的顶部以在左侧保留徽标并在右侧创建导航栏。图像很大，因为有人告诉我它可能会在高清电视上使用，并希望它可以很好地扩展。我想如果我把徽标和一个导航栏放在同一个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%
}

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

Answer 1

如果您尝试缩放图像本身，则需要在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

Answer 2

您需要为图像提供10％的高度，以便它知道可以使用div进行缩放。我相信如果你那样做会有效。

#top img {
    height: 10%;
}

修改：jsFiddle

CSS高度百分比不缩放图像

2 个答案: