英文:
Why is the image affecting my <nav> size?
问题
我想要导航栏在不同屏幕尺寸下保持相同的大小。
我已经使用以下CSS实现了这一点。
但是，当我在其下添加图像时，它的大小不再固定，而会随屏幕尺寸而变化。
我尝试分析这种行为，但我不明白为什么会这样。
有人能解释一下吗？
谢谢
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="testforanything.css" />
</head>
<body>
<nav class="navigation-bar">
<a href="home.html">Home</a>
<a href="profile.html">Profile</a>
<a href="contact.html">Contact</a>
</nav>
<!-- 当我移除图像时，问题消失了。 -->
<img src="https://dummyimage.com/1024x724/000/ffffff.jpg" />
</body>
</html>
英文:
I want the navigation bar to have the same size regardless of screen size.
I was able to do it with the following CSS.
However, when I add an image below it, its size is no longer fixed and change with the screen size.
I tried to analyze this behavior but I couldn't understand why it behaves that way.
Can someone explain it to me?
Thank you
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="testforanything.css" />
</head>
<body>
<nav class="navigation-bar">
<a href="home.html">Home</a>
<a href="profile.html">Profile</a>
<a href="contact.html">Contact</a>
</nav>
<!-- When I remove the image, the problem disappears. -->
<img src="https://dummyimage.com/1024x724/000/ffffff.jpg" />
</body>
</html>
<!-- end snippet -->
答案1
得分: 2
由于您的图像不具有响应性，且在达到图像大小后无法减小屏幕尺寸。使您的图像具有响应性，您将能够正常使用。我已经做了一些类似的事情，但您可以根据您的图像需求进行适当调整。
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
/* 添加的部分 */
img {
width: 100%;
height: auto;
max-width: 100%;
}
英文:
It is because your image not responsive and your screen size can not be reduces after reach your image size. Make your image responsive you will be good to go. I make it some thing like that but you can do however you want depending what you want with your image.
`
.navigation-bar {
background-color: rgba(232, 229, 228, 0.5);
height: 60px;
width: 400px;
border-radius: 30px;
position: fixed;
top: 10%;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
}
/*added part */
img {
width: 100%;
height: auto;
max-width: 100%;
}
`
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论