徽标图像必须根据标题的高度进行调整

Question

寻求建议：在流体标题的左侧或左侧显示我的网站（方形）徽标的最佳方法是什么？

我的标题占据宽度的100％，但根据视口大小调整高度。所以我不能简单地将徽标浮动到内容的左侧，因为那时图像没有正确的高度（和宽度，因为它是方形的）。

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

background-position: left;

background-repeat: no-repeat;

background-size: contain;

但问题是它需要不同的填充 - 留在不同的屏幕/视口大小。

然后尝试在标题上放置display：table并在徽标和标题内容div上显示：table-cell，然后标题内容调整为徽标的高度而不是相反，因为徽标是最大的在线元素。

这是HTML（简化）：

<header>

  <div class="header-contents">

    <h1>Site title</h1>

    <nav>

  </div>

</header>

我该怎么办？

Answer 1

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

将其设置为CSS表，将img放在左表格单元格的DIV中，给出百分比宽度和自动高度：

（此处为codepen：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％=标题高度 - 可能更小或更大）：​​

大屏幕：

小屏幕：

Answer 2

.header-contents {
      background-image: url(yourimage);
      background-position: left center;
      background-size: auto 100%;
      background-repeat: no-repeat;
}

如果不是您要找的答案，请提供一个小提琴和一个更好的解释：）

Answer 3

我现在所做的是为不同的分辨率提供固定的标题高度。看来完全流畅不是一种选择。

代码，以防任何人感兴趣：

@media only screen and (min-width: 568px) {

.site-branding {

    background: url('http://atlanticsentinel.com/wp-content/uploads/2015/12/Atlantic-Sentinel-logo.png');

    background-position: left;

    background-size: contain;

    background-repeat: no-repeat;

    height: 100px;

    padding-left: 115px; }

h1.site-title {

    font-size: 2em; } }

@media only screen and (min-width: 768px) {

.site-branding {

    height: 120px;

    padding-left: 135px; }

h1.site-title {

    font-size: 3.2em; } }

如果还有其他选择，请告诉我！我会很感激其他想法！

感谢您的帮助！