css - 图片在手机和平​​板电脑上的调整大小不同？

Question

我在一个 Wordpress 网站上工作，我有一个背景图像作为我的 Logo ，我的实际标题图像是透明的。我正在使用此代码调整移动设备背景图片的大小:

@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 时，图像保持完整大小并居中，我认为这在移动设备上看起来不错。它只是开始剪裁图像的边，但 Logo 的文本不受影响。

为了防止 Logo 被剪裁，我们需要多考虑一下。在宽度为 640px 并使用 70% 规则时，背景图像在 450px 时几乎完全显示为全尺寸。所以我们需要两条规则:

@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%。现在，在那些较小的屏幕上，背景图像要么是原始图像大小，要么是屏幕的整个宽度 - 它不会再被截断。