Css 如何使徽标高度响应缩放？

如果用户的浏览器宽度太小，我会尽量缩小我的徽标。我现在可以很好地缩放徽标，但是我无法使

h1

的高度与图像成比例缩放

如果我从CSS中删除

height

，那么

h1

就会崩溃。

min height

和

max height

都不起作用。所以我不知道该怎么办。如何使图像周围的红色边框紧密

.logo{
背景图像：url（'http://placehold.it/397x68');
最大宽度：397px；
高度：68px；
背景大小：100%；
背景重复：无重复；
保证金：0自动；
边框：1px纯红；
}
跨度{
显示：无；
}

---

我的标题

这个问题本身根本与徽标无关

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

如果这真的是一张图片，为什么不在那里放一张呢。可以使用一些常用的文本替换技术隐藏文本

---

您应该查看以下文章：

注：不要把你的标志放在h1标签里

这似乎有效：

.logo{
最大宽度：397px；
最大高度：68px；
}
img{
宽度：100%；
身高：100%；
}

---

可以这样做，但需要额外的包装器元素

HTML

也修改自

---

.

使用标签而不是背景是选项吗？@KaloyanIvanov是。我更关心外表而不是语义。看来你已经找到了解决办法。：）我只需删除

.logo

元素的高度，并使用

最大宽度：100%；高度：自动用于图像。
<div class="wrapper">
     <h1 class="logo"><span>My Title</span></h1>
</div>

.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;
}