CSS高度百分比不缩放图像

我正在尝试创建网站的顶部，以在左侧保留一个徽标，并在右侧保留一个导航栏。图像很大，因为我被告知它可能在HDTV上使用，并希望它能够很好地扩展。我想如果我把徽标和一个导航栏放在同一个div中，我可以将一个百分比应用到高度，所以它始终是屏幕的前10％，但它不会与我的代码一起缩放，它只是保持相同的图像大小。任何帮助将非常感激。CSS高度百分比不缩放图像

<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>

这是使用

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

我真的很感激任何人的帮助下，CSS IM。

来源

2013-02-21 user2093601

如果您尝试缩放图像本身，则需要将图像定位到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-21 01:36:17

这实际上似乎使它更大，但至少它缩放。任何其他想法？ – user2093601 2013-02-21 02:13:04

@ user2093601图像在我的[jsfiddle示例]（http://jsfiddle.net/JvgtX/show/）中的10％框架内缩放。什么不工作？ – 2013-02-21 02:16:07

对不起，在stackoverflow中的示例代码显示img高度：100％不是10％。尽管如此，JS小提琴的例子的确适用于img元素的10％高度。 img元素不应该采用父顶部div的属性并进行调整吗？这就是说，为什么我不能使包含div'顶部'10％，并有img继承该大小属性？ – user2093601 2013-02-21 02:20:14

你需要给10％的图像的高度，使得它知道用div来扩展。如果你这样做，我相信它会起作用。

#top img { 
    height: 10%; 
}

编辑：jsFiddle

来源

2013-02-21 01:40:40

这确实使其成比例。图像不应该继承div的属性，所以我可以将其分配100％？ – user2093601 2013-02-21 02:15:55

它浮动，所以'＃top'实际上是空的（高度：0px），因为float将元素从正常流中取出。 – 2013-02-21 02:20:40

这是假设你想漂浮'＃top'的内容当然。 – 2013-02-21 02:21:39

CSS高度百分比不缩放图像

回答

相关问题