logo标签列表

CSS 高度百分比不会缩放图片

css
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%
}

我非常感谢任何人的帮助。

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

那似乎确实使它变大了，但至少它进行了缩放。还有其他的想法吗？ - user2093601
@user2093601 在我的jsfiddle示例中，图像在10％框架内缩放。到底是什么没有起作用？ - Ruben Infante
啊，抱歉stackoverflow上的示例代码显示img height:100%而不是10%。你是对的，JS fiddle示例确实可以在img元素应用了10%高度后工作。难道img元素不应该继承父级顶部div的属性并进行调整吗？也就是说，为什么我不能将包含div的“top”设置为10%，并使img继承该大小属性呢？ - user2093601
@user2093601 CSS height 不是一个继承属性。 - Ruben Infante
你觉得我在构建HTML方面的开端不太好吗？基本上，我想让顶部只显示图像，并使导航栏居中且位于图像右侧。无论屏幕大小如何，所有这些内容都占据屏幕的10％。 - user2093601
@user2093601 我认为你想要实现的是合理的。在我的原始示例中，我实际上做出了一个假设，现在已经进行了更正。当您使用百分比时，必须确保您的 html 和 body 容器明确设置为占用一定的空间。否则可能会出现意外行为，并且某些浏览器可能会表现不同。现在将 img 的高度设置为其父元素的 100% 可以正常工作。 - Ruben Infante
1

你需要给图片设置一个高度为10%，这样它就知道要随着div进行缩放。我相信如果你这样做，它会起作用的。

#top img {
    height: 10%;
}

编辑：jsFiddle

这确实可以扩展。难道图片不应该继承div的属性，这样我就可以将其分配为100％吗？ - user2093601
它被浮动了，所以 #top 实际上是空的（高度为 0 像素），因为浮动会使元素脱离正常流。 - James Coyle
这是假设您想让 #top 的内容浮动的前提下。 - James Coyle
如果我能请教您的意见，那么如果您想让图像和导航栏位于屏幕中央，并且导航栏在图像右侧而不是下方，您会如何设置属性？ - user2093601
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接