为了使您的图像具有响应性，它们需要CSS。CSS将通知图像100%拉伸可用空间并自动调整高度。

img.responsive {
    width: 100%;
    height: auto;
}

因为您不想将此规则应用于所有图像，所以需要在目标图像上添加一个类，告诉它使用这些响应规则。

<img class="responsive" src="somepath/file.jpg" >

将上面的CSS规则添加到style.css 然后添加类responsive 符合您的形象。

如果要先测试这是否有效，请打开可视化编辑器的“文本编辑器”选项卡并找到您的图像。添加style 属性，或仅将相关样式添加到现有样式。

<img style="width:100%;height:auto;" src="somepath/file.jpg" >

由于这是一个手动过程，下一个问题可能是，‘如何自动向插入编辑器的图像添加响应类？’？。在这种情况下，您可以确保在视觉编辑器中添加的图像在放置之前使用image_send_to_editor 钩您可以将其放在函数中。php或插件，但它实际上只在admin 您网站的节。

add_filter(\'image_send_to_editor\', \'wpse_20160112_filter_image_send_to_editor\', 11, 8);

function wpse_20160112_filter_image_send_to_editor($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $responsive_content = str_replace(\'class="\', \'class="responsive \', $html);

    return $responsive_content;
}

Galleries 与同一负责人合作。您需要提前建立类规则，或者使用post_gallery 和/或img_caption_shortcode 钩

幸运的是，解决方案更加简单。你所需要的就是这个CSS规则，让你所有的画廊图片都能响应。

.gallery .gallery-item img {
    width: 100%;
    height: auto;
}