html - 正确设置 Logo 大小 + 删除填充

Question

我使用的主题是自动将我的 Logo 调整为特定大小。我尝试通过在 .header .logo { 元素中添加 width: 100%; 来编辑 css 文件，如下面的代码所示:

Header
*/
.header_container {
  min-height: 40px;
}

.header {
  height: auto;
  position: static;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 101;
  background: #fff;
}
.header .header_top {
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  direction: ltr;
  background: #f6f6f6;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top {
    padding: 10px 15px;
  }
}
.header .header_top > .row > .columns {
  padding: 0;
  min-height: 1px;
  height: 70px;
}
@media only screen and (min-width: 40.063em) {
  .header .header_top > .row > .columns {
    padding: 0 0.9375em;
  }
}
.header .logo {
  display: table;
  min-height: 1px;
    width: 100%;
}
.header .logo .logolink {
  display: table-cell;
  vertical-align: middle;
  max-width: 100%;
}
.header .logo .logoimg {
  display: inline-block;
  max-height: 40px;
}
}
@media only screen and (min-width: 40.063em) {
  .header .logo .logoimg {
    max-height: 70px;
  }
}

这使 Logo 以我想要的方式出现，但现在我有巨大的顶部和底部填充，我不知道如何将它们去掉。 Print screen

此外，社交媒体图标的显示位置低于 Logo (它们应该与 Logo 对齐)。

有什么建议吗？

谢谢。

Answer 1

我不能用你给我的文件做一个合适的模型；我没有菜单和社交按钮的其余样式表，而且我也没有这些的 HTML(您在那里只给了我 <?php?> 标签)。然而，似乎唯一的问题是 .logo宽度为 100% 的元素只是将这些元素推开，因此菜单按钮单独显示在上方的一行，社交按钮单独显示在下方的一行。

这可能是 header 太高的唯一原因，因此填充问题应该会自行消失。

因此，删除您添加的行，并定位到 <img>直接标记宽度远小于 100%。

以下 CSS 似乎是使图像适合您提供的容器大小所必需的:

header .logo .logoimg {
  width: 100%;
}

header.fixed .logo .logoimg {
  width: auto;
}

此外，更改 medium-4 children 上课<div class="row full-width-row">至 medium-3 , medium-6 , 和 medium-3分别。这为标题 (medium-6) 提供了十二分之六的空间，其他各占 25%。这和社交按钮一样小。