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

Julie 发表于 Dev

朱丽叶

我正在一个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％，这在平板电脑上很好，但是我希望在手机上更大。

如果需要，您可以在这里查看我的网站。这是我第一次使用移动版式。任何帮助将非常感激！:)

企业家

如果删除该行：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。