Css 如何使此图像具有响应性？

我试图包括我的网站的标志。它需要作出反应。使用以下CSS，图像的宽度可以，但徽标的顶部和底部不显示。如果网站没有响应，我会把高度：100px位于

宽度下方

。我怎样才能使所有的标志显示，包括顶部和底部位，但仍然使标志响应

  .header-image .site-title > a {
        background:  url(images/logo.png) no-repeat left;
        float: left;
        width: 100%;

        }

其余的CSS将使徽标的顶部和底部不显示，如下所示

.title-area {
    float: left;
    padding: 10px 0;
    width: 360px;

}

.header-full-width .title-area {
    width: 100%;
}

.site-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
}

.site-title a,
.site-title a:hover {
    color: #333;
}

.header-image .site-title > a {
    background:  url(images/logo.png) no-repeat left;
    float: left;
    width: 100%;

}

.site-description {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

.site-description,
.site-title {
    margin-bottom: 0;
    height: auto; /*added by me */
}

.header-image .site-description,
.header-image .site-title {
    display: block;
    text-indent: -9999px;
}

---

< P>我怀疑它与容器有关吗？

< P>使用元素的固定高度不会自动使站点“不响应”，但您可以考虑使用<代码>最小高度：100px；<代码>（或任何正确的高度），以确保徽标的重要元素不会被隐藏。根据所需行为的具体情况，您还可以（或相反）设置相对高度（例如，

高度：100%；

）

---

另一种可能的方法是使用

cover

或

contain

关键字值来表示

我很难理解您正在尝试做什么，您能否在JSFIDLE或其他工具中构建一个实例？您想要一个“响应性”网站，并且您正在使用浮动？背景图像不会神奇地展开内容框。曾经请拉小提琴。

minheight

似乎有用。

min height

是编码的“响应方式”吗？谢谢你的支持！“响应性”并不是一个精心保护的传统，也不是一个css规则列表，它只是一种描述在不同设备上显示良好的网站的方式。如果你用得好，当然可以。如果使用不当，则不会。（也就是说，最小高度、最大高度和相关宽度规则通常用于响应性设计）