css - Logo 图像必须调整到标题的高度

Question

寻求建议:让我的网站(方形) Logo 出现在流体标题上或左侧的最佳方法是什么？

我的页眉占据了 100% 的宽度，但会根据视口(viewport)大小调整高度。所以我不能简单地将 Logo float 到内容的左侧，因为这样图像就没有正确的高度(和宽度，因为它是方形的)。

我尝试将图片设置为标题的背景图像，使用:

background-position: left;

background-repeat: no-repeat;

background-size: contain;

但问题是它需要不同的 paddings-left 以适应不同的屏幕/视口(viewport)尺寸。

然后尝试将 display: table 放在标题上，并将 display: table-cell 放在 Logo 和标题内容 div 上，但随后标题内容会调整为 Logo 的高度，而不是相反，因为 Logo 是最大的行中的元素。

这是 HTML(简化):

<header>

  <div class="header-contents">

    <h1>Site title</h1>

    <nav>

  </div>

</header>

我该怎么办？

Answer 1

编辑/完全不同的解决方案:

将其设置为 CSS 表格，将 img 放入左侧表格单元格的 DIV 中，为其指定百分比宽度和自动高度:

(在代码笔中:http://codepen.io/anon/pen/XXNyBe)

<div id="header">
   <div id="logo">
   <img src="http://placehold.it/300x300/fa0">
  </div>
  <div id="restofheader">
  <h1>My Headline</h1>
  </div>
</div>

#header {
  background: green;
  display: table;
  width: 100%;
}

#logo {
  display: table-cell;
  line-height: 0;
  width: 20%;
}

#logo img {
  width: 100%;
  height: auto;
}

#restofheader {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  padding-left: 30px;
}

另外，2 个应用到您网站的屏幕截图(20% Logo 宽度 = 标题高度 - 可以更小或更大):​​

大屏幕:

小屏幕: