css - img.responsive 类在 wordpress 不工作

Question

帮助我使图像随着浏览器尺寸的减小而自动调整大小。

我已经在我的手写网站上添加了一个 wordpress 博客。它在目录/blog 中 http://photographyattic.com/blog/ 我包括 wordpress 片段代码以在我的/index.php 页面上添加帖子。 该站点是使用 Bootstrap 3 制作的。wordpress 帖子所在的页面顶部使用的是 Bootstrap 网格 容器 排 col-md-2(左图)、col-md-7(wordpress 内容)和 col-md-3(右图)

我已经尝试了几个论坛建议的修复方法，使图像随着浏览器窗口的大小调整而缩小。但如您所见，当浏览器窗口缩小时，它仍然是 770 像素宽度，并且在 col-md-3 之下。 我原以为将 img-responsive 类添加到 wordpress 媒体表单会解决问题，但事实并非如此。我能够调整图像大小的唯一方法是将绝对位置添加到新的 img 类，然后图像覆盖文本但会根据需要调整大小。

有什么建议吗？

Answer 1

据我所知，图像根据屏幕尺寸进行响应。服装的宽度和高度属性可能会导致问题。如果您想避免插入图像功能自动添加宽度和高度属性，请添加以下代码到你的 functions.php

add_filter( 'post_thumbnail_html', 'remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'remove_width_attribute', 10 );

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

更新: 在第 135 行的 wp-settings.php 文件中，您将看到这两行:

require (ABSPATH . WPINC . '/functions.php');
require (ABSPATH . WPINC . '/plugin.php');

只需颠倒它们列出的顺序，因为 add_filter() 函数不在 functions.php 文件中；它在 plugin.php 文件中，所以...它们现在应该如下所示:

require (ABSPATH . WPINC . '/plugin.php');
require (ABSPATH . WPINC . '/functions.php');