WordPress适配移动端APP：图片比例缩放解决方案咨询

Since WordPress's add_image_size() only accepts fixed pixel dimensions, here are a few practical ways to achieve proportional scaling (like 0.5x or 0.3x) for your mobile app's content:

1. Generate Proportional Sizes Automatically on Upload #

This method hooks into WordPress's image upload process to create scaled versions of every image based on your desired ratio. Add this code to your theme's functions.php file or a custom plugin:

add_filter('wp_generate_attachment_metadata', 'create_proportional_image_size', 10, 2);
function create_proportional_image_size($metadata, $attachment_id) {
    // Define your scaling ratios here (e.g., 0.3 = 30% of original)
    $scale_ratios = [0.3, 0.5];

    $original_file = get_attached_file($attachment_id);
    $editor = wp_get_image_editor($original_file);

    if (!is_wp_error($editor)) {
        $original_size = $editor->get_size();

        foreach ($scale_ratios as $ratio) {
            $new_width = floor($original_size['width'] * $ratio);
            $new_height = floor($original_size['height'] * $ratio);
            $size_slug = 'scaled_' . ($ratio * 100) . 'pct';

            // Resize without cropping (strictly maintains aspect ratio)
            $editor->resize($new_width, $new_height, false);
            $resized_file = $editor->save();

            if (!is_wp_error($resized_file)) {
                // Add the new size to the image's metadata
                $metadata['sizes'][$size_slug] = [
                    'file' => basename($resized_file['path']),
                    'width' => $new_width,
                    'height' => $new_height,
                    'mime-type' => $resized_file['mime-type']
                ];
            }
        }
    }

    return $metadata;
}

How to use it: #

• After adding the code, upload a new image – WordPress will automatically generate the 30% and 50% scaled versions.
• For existing images, use a plugin like Regenerate Thumbnails to create the scaled sizes retroactively.
• To display the scaled image in your content, use:

  echo wp_get_attachment_image($attachment_id, 'scaled_30pct');
  

2. On-the-Fly Proportional Resizing (No Pre-Generation) #

If you prefer not to generate scaled images upfront, this function creates and returns the scaled image URL when needed (it checks if the resized image exists first to avoid redundant processing):

function get_scaled_image_url($attachment_id, $scale_ratio) {
    $original_file = get_attached_file($attachment_id);
    if (!$original_file) return wp_get_attachment_url($attachment_id);

    $upload_dir = wp_upload_dir();
    $file_info = pathinfo($original_file);
    $new_filename = "{$file_info['filename']}_scaled_" . ($scale_ratio * 100) . "pct.{$file_info['extension']}";
    $new_file_path = "{$file_info['dirname']}/{$new_filename}";
    $new_file_url = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $new_file_path);

    // Create the scaled image if it doesn't exist
    if (!file_exists($new_file_path)) {
        $editor = wp_get_image_editor($original_file);
        if (is_wp_error($editor)) return wp_get_attachment_url($attachment_id);

        $original_size = $editor->get_size();
        $new_width = floor($original_size['width'] * $scale_ratio);
        $new_height = floor($original_size['height'] * $scale_ratio);

        $editor->resize($new_width, $new_height, false);
        $resized_file = $editor->save($new_file_path);

        if (is_wp_error($resized_file)) return wp_get_attachment_url($attachment_id);
    }

    return $new_file_url;
}

How to use it: #

Call this function anywhere you need to output the scaled image URL:

// Output a 30% scaled image
echo '<img src="' . get_scaled_image_url($attachment_id, 0.3) . '" alt="Scaled app content image">';

3. Use a Plugin (No Coding Required) #

If you'd rather avoid code, plugins like:

• Simple Image Sizes: Lets you define custom image sizes with proportional scaling (set one dimension to "auto" to maintain aspect ratio)
• Regenerate Thumbnails Advanced: Includes bulk scaling tools that let you resize existing images by percentage

Just install the plugin, configure your desired scaling ratio, and regenerate thumbnails if needed.

内容的提问来源于stack exchange，提问作者Martin