Question

如果用户的浏览器宽度太小，我正试图让我的徽标缩小。我现在已经很好地缩放了徽标，但我无法使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;
}

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

N.B。在js fiddle中预览上面的代码会更容易，这样您就可以直接滑动垂直分隔线以查看其行为。

Answer 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>

Answer 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

Answer 3

问题本身与徽标无关。

您正在尝试创建一个高度与其宽度成比例的div。 HTML + CSS无法实现。

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

Responsive height proportional to width

Answer 4

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

PS：不要将您的徽标放在h1标签内。

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

4 个答案: