gpt4 book ai didi

CSS 高度百分比不缩放图像

转载 作者:技术小花猫 更新时间:2023-10-29 11:11:12 26 4
gpt4 key购买 nike

我正在尝试创建一个网站的顶部,以便在左侧放置一个 Logo ,在右侧放置一个导航栏。图片很大,因为有人告诉我它可能会用在 HDTV 上,并且希望它能很好地缩放。我想如果我把 Logo 和导航栏放在同一个 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%
}

非常感谢任何人的帮助。

最佳答案

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

关于CSS 高度百分比不缩放图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14993156/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com