为移动设备提供定制特色形象

时间:2018-11-16 作者:Bensen

为多个特色图像提供适当缩放是一种好方法吗?

现在,功能图像大小;Desktop"E;高达1140x250。相当宽,会收缩得太远。”;Mobile 1"E;,直到你真的无法再识别图像。

我的想法是为高达500px的手机提供第二张特色图片。此“的大小”;Mobile 2"E;特色图片应该是500x250左右。

Pro: 能够在移动/桌面上提供不同的图像,并自行裁剪/缩放
Con: 每个图像都需要上传和编辑两次。

有没有我完全错过的WordPress原生方式来实现这一点?Mobile Featured Image Example

1 个回复
SO网友:Colin

我会使用高级自定义字段和Sass mixin:

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width $height;
  }
}
//Usage
div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
也可以使用特色图像或本机自定义字段代替ACF。要获得无需上传多个图像版本的自动解决方案,您可以使用retina插件-WP Retina 2x.

结束

相关推荐

保存Metabox内容无效

我正在尝试保存一个metabox输入,但它似乎不起作用。我使用的是数组(因为我需要我的metabox有60行),所以我假设问题就出在数组中。这是我为管理员提供的metabox函数(它可以正确显示我要显示的信息):function mock_metabox() { global $post; // Nonce field wp_nonce_field( basename( __FILE__ ), \'mock_fields\' ); // in