Question

我正在尝试使标头响应。目前标题已修复，当您从不同的屏幕重新设置中查看时，它看起来不太好。

＆＃13;

#tie-wrapper #theme-header {
    background-image: url(http://example.com/header-image.jpg);
    background-repeat: no-repeat;
}

＆＃13;

我希望在不同的分辨率上拥有相同的图像。它应该随网站减少。徽标也居中，因此图像应该是。

我真的不知道如何为不同的分辨率添加此图像。

由于

Answer 1

您可以使用css：

在不同的屏幕宽度上使用不同的图像

@media only screen and (max-width: 1023px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_FULLWIDTH.jpg') center center/cover no-repeat;
        min-height: 500px;
        width: 100%;
    }
}
@media only screen and (max-width: 767px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_LARGE.jpg') center center/cover no-repeat;
        min-height: 400px;
    }
}
@media only screen and (max-width: 480px) {
    #tie-wrapper #theme-header {
        background: url('http://example.com/header-image_MEDIUM.jpg') center center/cover no-repeat;
        min-height: 300px;
    }
}

我通常会将此代码添加到我的模板文件中并使用wp_get_attachement()，加载不同大小的图片。或者你可以在styles.css中硬编码。无论哪种方式。

使标题响应不同的屏幕分辨率

1 个答案: