Wordpress 移动网站中的图像？

我正在创建一个移动版Wordpress网站。如果在移动设备上查看，Im将使用媒体查询链接到移动css文件。当我在我的博客上发帖时，图像对于手机屏幕来说显然太大了。我应该如何解决它？

您可以使用下面的css缩放图像

img{
    max-width:100%;
}

如果头部标记中未使用视口，请使用此视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" />

---

上面的代码将在设备视口中缩放站点，如果您想停止zoom set user scalable=No

一个好的解决方案是为不同的屏幕大小创建“bucket”，并根据媒体查询使用不同的背景图像

例如，您可以创建4个具有图像宽度的存储桶：

• 300-500像素的400像素
• 800像素用于500-800像素
• 800-1200像素的1200像素
• 1400像素对1200像素+

在CSS中，您可以创建如下媒体查询：

#elem {
    max-width: 100%;
}
@media all and (min-width: 300px) and (max-width: 500px) {
    #elem {
        background: url(../images/logo-400.jpg) left center no-repeat;
    }
}
@media all and (min-width: 500px) and (max-width: 800px) {
    #elem {
        background: url(../images/logo-800.jpg) left center no-repeat;
    }
}
@media all and (min-width: 800px) and (max-width: 1200px) {
    #elem {
        background: url(../images/logo-1200.jpg) left center no-repeat;
    }
}
@media all and (min-width: 1200px) {
    #elem {
        background: url(../images/logo-1400.jpg) left center no-repeat;
    }
}

---

同时使用“最小宽度”和“最大宽度”可确保您的设备只下载适合特定“存储桶”的图像。

如果我这样做，整个图像仍将被加载，这将降低我的网站速度down@Micheal我刚刚更新了视口代码，如果您没有使用或您的视口代码不相似，请尝试此代码。