我如何使这个图像响应？

Question

我正试图为我的网站包括一个标志。它需要有反应。使用下面的CSS，图像的宽度是可以的，但是徽标的顶部和底部不显示。如果站点没有响应，我就把height: 100px;放在width下面。我如何使所有的标志显示，包括顶部和底部的部分，但仍然使徽标响应？

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

我怀疑这跟集装箱有关吧？

Answer 1

对元素使用固定高度不会自动使站点“不响应”，但您可以考虑使用min-height: 100px; (或任何正确的高度)来确保徽标的重要元素不会被隐藏。根据所需行为的具体情况，您还可以(或者相反)设置一个相对高度(例如height: 100%;)。

另一种可能的方法是将cover或contain关键字值用于背景大小属性。