Question

我正在尝试为我的网站添加徽标。它需要响应。使用下面的CSS，图像宽度可以正常，但顶部＆amp;徽标底部不显示。如果网站没有响应，我只需将height: 100px;放在width下面。如何制作所有徽标显示，包括它的顶部和底部位置，但仍能使徽标响应？

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

        }

其他CSS我将成为顶级＆amp;标识的底部部分不显示，如下所示。

.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

对元素使用固定高度不会自动创建网站＆＃34;没有响应，＆＃34;但您可以考虑使用min-height: 100px;（或任何正确的高度）来确保徽标的重要元素不会被隐藏。根据所需行为的具体情况，您还可以（或者相反）设置相对高度（例如height: 100%;）

另一种可能的方法是使用the background-size property的cover或contain关键字值

如何使此图像响应？

1 个答案: