图片在 phone 和平板电脑上的调整大小不同？

Question

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

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

}

我遇到的问题是它在平板电脑上看起来不错，但在 phone 上太小了。我希望它仅在 phone 上更宽，并且下面有一堆空的 space。我认为 space 可能与我的 header 图片也需要调整大小有关。

有没有办法也调整透明 header 图像的大小，但只能在 phone 上，而不是平板电脑上？有没有办法在 phone 和平板电脑上以不同方式调整此背景图片的大小？该代码将其设置为 70%，这在平板电脑上很好，但我更喜欢在 phone.

上更大

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

Answer 1

如果删除该行：

background-size: 70% auto;

它在所有尺寸的屏幕上对我来说都很好。

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

background-position: 50% top;

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

为了防止徽标被剪裁，我们需要多考虑一下。在宽度为 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%。现在，在那些较小的屏幕上，背景图像要么是原始图像大小，要么是屏幕的整个宽度 - 它不会再被截断。

Answer 2

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

Answer 3

当宽度低于 420px 时，您网站上的图片会发生变化。因此，将此规则添加到背景图像中可能是个好主意。

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

图片在 phone 和平板电脑上的调整大小不同？

Image resize differently on phone vs. tablet?

css

wordpress

resize