浏览移动的或缩小浏览器时徽标图像被切断- CSS/Flexbox问题

7jmck4yq 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(132)

我是HTML/CSS的新手，目前正在学习一门在线课程。我已经在我的一个项目上工作了几个小时，完全被我的导航栏的问题难住了。
徽标和导航链接在桌面浏览器上显示良好;但是，当您将浏览器设置为最小尺寸或在移动的上浏览时，徽标图像会在右侧被剪切掉。
任何帮助都将不胜感激。

@import url('https://fonts.googleapis.com/css?family=Roboto');   

.top-bar {
  display: flex;
  background-color: #ECECEC;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  align-items: top;
}

.header-img {
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
  max-width: 534px;
  height: auto;
  padding: 10px 20px 10px 20px;
  margin-right: auto;
  margin-left: auto;
}

.nav-bar { 
  display: flex;
  flex: 2;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-family: 'Roboto', serif;
  padding: 5px 0px 5px 0px;
}

.nav-bar a{
  color: black;
  text-decoration: none;
  border-right: 1px solid black;
  padding: 0px 5px 0px 5px;
}

.nav-bar a:hover {
  color: #808080;
}

.nav-bar a:last-of-type {
  border: none;
}

#home { 
    flex-basis: 20%;
    display: flex;
    justify-content: center;
 }

#features {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#video {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#pricing {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

body {
  padding: 100px 0px 0px 0px;
}

<header id="header">
   <title>Eltee's Electric Drums</title>
   <link href="https://fonts.googleapis.com/css2?family=Roboto">
   <div class="top-bar">
   <img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"></img>
   <nav class="nav-bar" id="nav-bar">
     <a class="nav-link" href="#home" id="home">Home</a>
     <a class="nav-link" href="#features" id="features">Features</a>
     <a class="nav-link" href="#video" id="video">Video</a>
     <a class="nav-link" href="#pricing" id="pricing">Pricing</a>
   </nav> 
 </header>

css

来源：https://stackoverflow.com/questions/70141567/logo-image-getting-cut-off-when-browsing-mobile-or-making-browser-smaller-css

2条答案

按热度按时间

y4ekin9u1#

你需要一个媒体查询来处理移动视口。我已经添加到您的脚本为.top-bar img。你的标记也位于不正确的点。<style>标记生活在<head>和以下</head>你需要body标记和体内标记是你的标记生活。所以它应该如下<html><head><style>css lives here</style></head><body>markup lives here</body></html>
请参阅snippet了解工作解决方案，尽管它可能只显示给定snippet编辑器尺寸的移动解决方案，因此将标记和样式吸收到页面中，它应该可以按预期在移动和桌面上工作。

<style>
    @import url('https://fonts.googleapis.com/css?family=Roboto');

    .top-bar {
      display: flex;
      background-color: #ECECEC;
      flex-wrap: wrap;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      align-items: top;
    }

    @media only screen and (max-width: 500px) {
      .top-bar img {
        display: flex;
        width: 100%;
        box-sizing: border-box;
      }
    }

    .header-img {
      display: flex;
      flex: 1;
      justify-content: center;
      width: 100%;
      max-width: 534px;
      height: auto;
      padding: 10px 20px 10px 20px;
      margin-right: auto;
      margin-left: auto;
    }

 

    .nav-bar {
      display: flex;
      flex: 2;
      justify-content: center;
      align-items: center;
      font-size: 1.5em;
      font-family: 'Roboto', serif;
      padding: 5px 0px 5px 0px;
    }

    .nav-bar a {
      color: black;
      text-decoration: none;
      border-right: 1px solid black;
      padding: 0px 5px 0px 5px;
    }

    .nav-bar a:hover {
      color: #808080;
    }

    .nav-bar a:last-of-type {
      border: none;
    }

    #home {
      flex-basis: 20%;
      display: flex;
      justify-content: center;
    }

    #features {
      display: flex;
      flex-basis: 20%;
      justify-content: center;
    }

    #video {
      display: flex;
      flex-basis: 20%;
      justify-content: center;
    }

    #pricing {
      display: flex;
      flex-basis: 20%;
      justify-content: center;
    }

    body {
      padding: 100px 0px 0px 0px;
    }

<html>

<body>
  <header id="header">
    <title>Eltee's Electric Drums</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto">
    <div class="top-bar">
      <img src="https://i.imgur.com/KCS3KND.png" id="header-img" class="header-img"/>
      <nav class="nav-bar" id="nav-bar">
        <a class="nav-link" href="#home" id="home">Home</a>
        <a class="nav-link" href="#features" id="features">Features</a>
        <a class="nav-link" href="#video" id="video">Video</a>
        <a class="nav-link" href="#pricing" id="pricing">Pricing</a>
      </nav>
    </div>
  </header>
</body>

</html>

赞(0）回复(0）举报 2023-02-14

qxsslcnc2#

你可以把你的logo放进一个div里面，这个div会像一个柔性的物品一样收缩和增长，然后告诉logo要适合div。

@import url('https://fonts.googleapis.com/css?family=Roboto');   

.top-bar {
  display: flex;
  background-color: #ECECEC;
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  align-items: top;
}

.header-img {
  display: flex;
  flex: 1;
  justify-content: center;
  width: 100%;
  max-width: 534px;
  height: auto;
  padding: 10px 20px 10px 20px;
  margin-right: auto;
  margin-left: auto;
}
.header-img img{
  width:100%;
  height:auto;
}
.nav-bar { 
  display: flex;
  flex: 2;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
  font-family: 'Roboto', serif;
  padding: 5px 0px 5px 0px;
}

.nav-bar a{
  color: black;
  text-decoration: none;
  border-right: 1px solid black;
  padding: 0px 5px 0px 5px;
}

.nav-bar a:hover {
  color: #808080;
}

.nav-bar a:last-of-type {
  border: none;
}

#home { 
    flex-basis: 20%;
    display: flex;
    justify-content: center;
 }

#features {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#video {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

#pricing {
  display: flex;
  flex-basis: 20%;
  justify-content: center;
}

body {
  padding: 100px 0px 0px 0px;
 }

<header id="header">
  <title>Eltee's Electric Drums</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto">
  <div class="top-bar">
    <div class="header-img"> <img src="https://i.imgur.com/KCS3KND.png" id="header-img" ></img></div>
    <nav class="nav-bar" id="nav-bar">
      <a class="nav-link" href="#home" id="home">Home</a>
      <a class="nav-link" href="#features" id="features">Features</a>
      <a class="nav-link" href="#video" id="video">Video</a>
      <a class="nav-link" href="#pricing" id="pricing">Pricing</a>
    </nav>
  </div>
</header>

赞(0）回复(0）举报 2023-02-14

我来回答

浏览移动的或缩小浏览器时徽标图像被切断- CSS/Flexbox问题

2条答案

相关问题

热门标签

最新问答