如何在WordPress中全局设置图片宽度100%且最大宽度为插入值？

Hey Matt, great question—totally get the frustration of tweaking every single image manually. Let’s walk through two reliable ways to solve this without the repetitive work:

This is the quickest fix since you don’t need to mess with PHP code. It lets images adapt to their container width while never exceeding the size you set when inserting them.

Just add this code to your theme’s custom CSS (Go to Appearance → Customize → Additional CSS):

/* 让文章内容里的图片自适应容器，最大宽度不超过插入时的设置 */
.entry-content img {
    width: 100%;
    height: auto;
}

/* 覆盖WordPress自动添加的内联width属性，用它作为max-width */
.entry-content img[width] {
    max-width: attr(width);
    width: 100%;
}

为什么这管用： #

• width: 100% 让图片自动填满父容器的宽度
• max-width: attr(width) 利用WordPress插入图片时自动添加的内联width值（也就是你选择的尺寸）作为图片的最大宽度上限
• height: auto 保持图片的原始比例，避免拉伸或变形

如果你的主题用了其他类名作为内容容器（不是.entry-content），可以用浏览器开发者工具找到对应的类名替换即可。

如果你想从根源解决问题——让WordPress默认输出干净的响应式图片代码——可以修改主题的functions.php文件。重要提醒：一定要用子主题修改！ 直接编辑父主题文件的话，主题更新后你的修改会被清空。

把这段代码添加到子主题的functions.php中：

// 移除WordPress自动添加的内联width和height属性
add_filter( 'post_thumbnail_html', 'remove_image_inline_dimensions', 10 );
add_filter( 'image_send_to_editor', 'remove_image_inline_dimensions', 10 );

function remove_image_inline_dimensions( $html ) {
    return preg_replace( '/(width|height)="\d*"\s/', '', $html );
}

// 给图片添加自适应样式，max-width匹配插入时选择的尺寸
add_filter( 'wp_get_attachment_image_attributes', 'add_responsive_image_styles', 10, 3 );

function add_responsive_image_styles( $attr, $attachment, $size ) {
    // 获取所选图片尺寸的宽度
    $image_data = wp_get_attachment_metadata( $attachment->ID );
    if ( isset( $image_data['sizes'][ $size ]['width'] ) ) {
        $max_width = $image_data['sizes'][ $size ]['width'];
        $attr['style'] = isset( $attr['style'] ) ? $attr['style'] : '';
        $attr['style'] .= "max-width: {$max_width}px; width: 100%; height: auto;";
    }
    return $attr;
}

工作原理： #

• 第一个函数移除了WordPress默认添加的内联width和height属性，避免它们干扰响应式样式
• 第二个函数会获取你插入图片时选择的尺寸（比如“中等”或“大尺寸”）的宽度值，给图片添加对应的max-width样式，同时设置width:100%保证自适应

两种方法都能让你在插入图片时只需设置一次尺寸，图片就会自动适配容器宽度且不超过你设定的最大值。选你觉得顺手的方式就行！

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