CSS 高度百分比不缩放图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14993156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS height percentage not scaling image
提问by user2093601
I'm trying to create the top portion of a website to hold a logo on the left and a nav bar on the right. The image is large because I was told it might be used on a HDTV and wanted it to scale well. I thought if I put the logo and a nav bar in the same div i could just apply a percentage to the height so it would always be the top 10% of the screen but it doesn't scale with my code, it just stays the same image size. Any help would be much appreciated.
我正在尝试创建网站的顶部以在左侧显示徽标并在右侧显示导航栏。图像很大，因为我被告知它可能用于 HDTV 并希望它能够很好地缩放。我想如果我将徽标和导航栏放在同一个 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>
And this is the CSS im using
这是我使用的 CSS
#top {
height: 10%;
width: 100%
}
I would really appreciate anyone's help.
我真的很感激任何人的帮助。
采纳答案by Ruben Infante
If you are trying to scale the image itself, you need to target the image in your CSS.
如果您尝试缩放图像本身，则需要在 CSS 中定位图像。
I would also recommend setting a minimum (and possibly maximum) limit to your scaling. There is a point where getting smaller will just look bad and become unusable.
我还建议为您的缩放设置最小（也可能是最大）限制。有一点，变小只会看起来很糟糕并且变得无法使用。
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;
}
