为什么Wordpress提供的是1024px版本的我的图像,而不是1920x1080屏幕上的原始图像?

时间:2017-08-04 作者:Pekka

我已经上传了一张2100px宽的图片到帖子中,并将该图片插入到帖子正文中。我正在根据Wordpress的《2116》创建一个自定义主题。

HTML看起来正常:

<img class="alignnone wp-image-2669 size-full"
     src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg" 
     alt="" width="2100" height="904" />
在前端,Wordpress所做的我认为是它的“响应图像”魔术(我认为我没有添加任何插件可以做到这一点:)

<img class="alignnone wp-image-2669 size-full" 
src="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg"
alt="" width="2100" height="904" 
srcset="http://.../wp-content/uploads/2017/07/GrillSommer1.jpg 2100w,
http://.../wp-content/uploads/2017/07/GrillSommer1-300x129.jpg 300w,     
http://.../wp-content/uploads/2017/07/GrillSommer1-768x331.jpg 768w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-1024x441.jpg 1024w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-340x146.jpg 340w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-500x215.jpg 500w, 
http://.../wp-content/uploads/2017/07/GrillSommer1-1200x517.jpg 1200w"
sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, 
       (max-width: 1362px) 62vw, 840px" />
如果我在读srcset 信息权,它应该是服务的

原则上我没有问题,但在1920x1080屏幕上,我得到的是1024px版本,当然看起来非常模糊!

这有什么明显的原因吗?

3 个回复
SO网友:Johansson

您的图像的src指向全尺寸图像,因此这不是永久链接的问题。问题发生的原因是sizes 价值观有一个变量可以确定内容的宽度,稍后WordPress将使用该变量生成图像的响应大小。

可以在主题的functions.php 文件:

if( !isset($content_width) ) {
    $content_width = 1920;
}
您可以使用此变量进行调整以获得所需的结果。

SO网友:Pekka

这个问题似乎是针对216主题的,我想它的内容区域的最大宽度是840像素。该主题在其functions.php, 在twentysixteen_content_image_sizes_attr() 作用

function twentysixteen_content_image_sizes_attr( $sizes, $size ) {

    $width = $size[0];

    1200 <= $width && $sizes = \'(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 1200px\';

    if ( \'page\' === get_post_type() ) {
        1200 > $width && $sizes = \'(max-width: \' . $width . \'px) 85vw, \' . $width . \'px\';
    } else {
        1200 > $width && 600 <= $width && $sizes = \'(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\';
        600 > $width && $sizes = \'(max-width: \' . $width . \'px) 85vw, \' . $width . \'px\';
    }

    return $sizes;
}
add_filter( \'wp_calculate_image_sizes\', \'twentysixteen_content_image_sizes_attr\', 10 , 2 );
老实说,我不太确定如何调整它以支持更大的内容宽度,或者更确切地说,在我的情况下,图像总是100%宽,所以我暂时禁用它。

对于制作而言,更详细地了解这一点可能是明智的,不过,将较小的图像提供给较小的屏幕设备肯定是一个好主意。

SO网友:Rei

您可以选中选项卡media setting 在wordpress中https://codex.wordpress.org/images/thumb/4/43/options-media.png/600px-options-media.png

结束

相关推荐

Get images from the post

使用Add Media 我在帖子中插入图片。我只想在单个贴子页面上检索这些图像。我正在使用get_attached_media 函数可检索这些图像。但它返回一个空数组。 <?php $media_image = get_attached_media( \'image\', $post->ID ); //print_r($media_image);?> <div class =\"single-post-flex-slider\">&#