Question

我正在使用以下代码打印出我的图片的srcset：

<?php if ( function_exists( 'wp_get_attachment_image_srcset' ) ) :?>
srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id( $blog_results->post->ID, 'medium' ) ) ); ?>"
sizes="<?php  echo esc_attr(wp_get_attachment_image_sizes( get_post_thumbnail_id( $blog_results->post->ID, 'medium' ) ) ); ?>"
<?php endif; ?>

我正在使用的容器宽度为350px，但WordPress会返回：

sizes="(max-width: 300px) 100vw, 300px"

我想以某种方式强制执行下一个可用尺寸，因为图像质量非常差。到目前为止，我一直在寻找解决方案，但没有成功。

如果没有硬编码“尺寸”，我能做到这一点吗？

Answer 1

你可能会尝试这种方法。

首先：

//$name = Image size identifier.
//$width = Image width in pixels.
//$height = Image height in pixels.
//$crop =true/false (crop images to specified width and height or resize).
$name = 'custom-size'; $width = '350px'; $height = '200px'; $crop = true;
add_image_size($name, $width, $height, $crop);

点击此链接https://developer.wordpress.org/reference/functions/add_image_size/。这个函数写在functions.php文件中。现在，您可以在需要的地方使用此自定义尺寸图像。

<?php if ( function_exists( 'wp_get_attachment_image_srcset' ) ) :?>
srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_post_thumbnail_id( $blog_results->post->ID, 'custom-size' ) ) ); ?>"
sizes="<?php  echo esc_attr(wp_get_attachment_image_sizes( get_post_thumbnail_id( $blog_results->post->ID, 'custom-size' ) ) ); ?>"
<?php endif; ?>

现在你可以得到你想要的形象了。

Answer 2

这个问题似乎已经存在了一段时间，直到今天我也遇到了同样的问题。我做了一些挖掘，发现这实际上是由主题的内容宽度引起的。只需删除主题的内容宽度或将其重新设置为所需的数字，即可解决此问题。

<?php
  // Look for the function setting content width, or create a new one in functions.php
  function mytheme_content_width() {
    $GLOBALS['content_width'] = apply_filters( 'mytheme_content_width', 300 ); // Change 300 to a bigger number
  }
  add_action( 'after_setup_theme', 'mytheme_content_width', 0 ); // Or completely remove the action.
?>

Answer 3

对我来说这适用于自定义尺寸：

add_image_size( 'custom_size', 350, 350 ); // here I add custom image size

// https://stackoverflow.com/a/45507581/3829187
function create_responsive_image( $img ) {
    $img_id = attachment_url_to_postid( $img );
    $img_srcset = wp_get_attachment_image_srcset( $img_id );
    $img_sizes = wp_get_attachment_image_sizes( $img_id, 'custom_size' ); // and here I use custom image size
    return '<img src="' . $img . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '">';
}

或者，如果您不想创建自定义图像尺寸，您可以使用其他默认的 WP 图像尺寸：“缩略图”、“中”、“大”、“完整”。默认为“中等”300px

function create_responsive_image( $img ) {
    $img_id = attachment_url_to_postid( $img );
    $img_srcset = wp_get_attachment_image_srcset( $img_id );
    $img_sizes = wp_get_attachment_image_sizes( $img_id, 'full' ); // for full size for example
    return '<img src="' . $img . '" srcset="' . esc_attr( $img_srcset ) . '" sizes="' . esc_attr( $img_sizes ) . '">';
}

wp_get_attachment_image_sizes（'large'）打印小尺寸

3 个答案: