如何让徽标高度响应缩放？答案

【问题标题】：How to get logo height to scale responsively?如何让徽标高度响应缩放？
【发布时间】：2015-03-01 03:59:47
【问题描述】：

如果用户的浏览器宽度太小，我会尝试缩小我的徽标。我现在已经很好地缩放了徽标，但我无法让 h1 的高度与图像成比例地缩放。

如果我从 CSS 中删除 height，那么 h1 就会崩溃。 min-height 和 max-height 都不起作用。所以我不确定该怎么做。如何使图像周围的红色边框紧密？

.logo {
    background-image: url('http://placehold.it/397x68');
    max-width: 397px;
    height: 68px;
    background-size: 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    border: 1px solid red;
}
span {
    display: none;
}

 &lt;h1 class="logo"&gt;&lt;span&gt;My Title&lt;/span&gt;&lt;/h1&gt;

注意在js fiddle 中预览上面的代码更容易，因此您只需滑动垂直分隔线即可查看其行为方式。

【问题讨论】：

是否使用标签而不是背景选项？
@KaloyanIvanov 是的。比起语义，我更关心外观。
看来您已经找到了解决方案。 :) 我将删除 .logo 元素的高度并使用 max-width: 100%; height: auto; 作为图像。

标签： css

【解决方案1】：

这似乎有效：

.logo {
  max-width: 397px;
  max-height: 68px;
}
img {
  width: 100%;
  height: 100%;
}

<div class="logo">
  <img src="http://placehold.it/397x68" alt="My Title">
</div>

【讨论】：

【解决方案2】：

可以做到，但需要一个额外的包装元素。

HTML

<div class="wrapper">
     <h1 class="logo"><span>My Title</span></h1>
</div>

CSS

.wrapper {
    position: relative;
    padding-bottom: 17.12%; /* aspect ratio of image */
    margin: 0 auto;
    max-width: 397px; /* image width */
    height: 0;
}
.wrapper .logo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 68px; /* image height */
    background-image: url('http://placehold.it/397x68');
    background-size: 100%;
    background-repeat: no-repeat;
    border: 1px solid red;
}
.logo span{
    display: none;
}

修改自this tutorial on how to make YouTube videos responsive，同样是here on SO。

jsFiddle example.

【讨论】：

【解决方案3】：

问题本身与徽标无关。

您正在尝试创建一个高度与其宽度相对成比例的 div。不能使用 HTML+CSS。

如果它实际上是图像，为什么不放在那里。可以使用一些常见的文本替换技术来隐藏文本。

Responsive height proportional to width

【讨论】：

【解决方案4】：

您应该查看以下文章：http://alistapart.com/article/fluid-images

PS：请勿将您的徽标放在 h1 标签内。

【讨论】：