Question

我正在一个Wordpress网站上工作，在那里我有一个背景图像作为我的徽标，而我的实际标题图像是透明的。我正在使用以下代码来调整手机背景图片的大小：

@media (max-width: 767px){
body.custom-background {
    background-image: url(http://gleefulthings.com/WPtestblog/wp-content/uploads/2018/06/backgroundlogo2.jpg);
    background-position: 50% top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 70% auto;
}

}

我遇到的问题是，在平板电脑上看起来不错，但在手机上却很小。我希望它仅在手机上更宽，并且在其下方有一堆空白。我认为该空间可能与我的标题图片也需要调整大小有关。

是否也有办法调整透明标题图像的大小，但仅在电话上，而不在平板电脑上？有没有办法在手机和平板电脑上以不同的方式调整背景图片的大小？该代码将其设置为70％，这在平板电脑上很好，但是我希望在手机上更大。

如果需要，您可以view my website here。这是我第一次使用移动版式。任何帮助将非常感激！：）

Answer 1

如果您删除该行：

background-size: 70% auto;

在所有尺寸的屏幕上看起来都不错。

缩小图像的是70％-使用屏幕宽度的70％进行显示。该行：

background-position: 50% top;

使图像居中并位于页面顶部。当您移除background-size时，图片会保持完整尺寸并居中，我认为在移动设备上看起来不错。它只是开始剪切图像的侧面，但是徽标的文本不受影响。

为防止徽标被剪裁，我们需要多加思考。在640像素的宽度下，并使用70％规则，背景图像在450像素时几乎完全以完整尺寸显示。所以我们需要两个规则：

@media only screen and (max-width: 640px) {
    body.custom-background {
        background-size: auto;
    }
}
@media only screen and (max-width: 450px) {
    body.custom-background {
        background-size: 100% auto;
    }
}

这意味着背景介于450像素和640像素之间，将以其原始大小显示-450像素。然后，当屏幕小于450px时，将其包含在内，因此缩小到屏幕宽度的100％。现在，在较小的屏幕上，背景图像要么是原始图像大小，要么是屏幕的整个宽度-它不再会被截断。

Answer 2

@media（最大宽度：480像素）{ 在这里添加您的手机CSS }

Answer 3

宽度为420px以下时，您网站上的图片将发生变化。因此，将此规则添加到背景图像也许是个好主意。

@media (max-width: 420px)
body.custom-background {
    background-size: 100% auto;
}

手机和平板电脑上的图片调整大小是否不同？

3 个答案: